Styling
This section covers best practices for stylesheet imports and overriding component styles.
Skeleton Stylesheets
The CLI will automatically import all.css into src/routes/+layout.svelte.
import '@skeletonlabs/skeleton/styles/all.css';We recommend all.css for most users. This includes everything required for Skeleton, with all imports in the correct order.
| Stylesheet | Description | View Source |
|---|---|---|
all.css
|
A universal stylesheet that imports all stylesheets in the optimal order. | all.css |
Global Stylesheet
SvelteKit's global stylesheet is located in /src/app.postcss. The CLI will automatically purge
@tailwind directives from Svelte-Add
and add required styles.
Import Order
Skeleton has strict requirements for stylesheet import order. We've explained the purpose of each stylesheet below.
| Order | Stylesheet | Reason |
|---|---|---|
| 1. | Theme Stylesheet | Houses your themes use CSS properties for colors, border radius, etc. |
| 2. | Skeleton Stylesheet(s) | Imports Tailwind directives, element, and components styles. |
| 3. | Global Stylesheet | Keep last so you can override the above styles. Project-specific styles go here. |
See the reference below. Please ensure your imports conform to the following order before you continue.
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '@skeletonlabs/skeleton/styles/all.css';
import '../app.postcss';How to Customize Styles
Learn how to customize Skeleton components and elements below.
This is the recommended manner to style most components. Each component provides a set of style props (read: properties) that allow you to override the default style classes. See a list of available options under the "Props" tab per each feature in Skeleton.
<ExampleComponent background="bg-secondary-500" text="text-yellow-500 md:text-green-500">Skeleton</ExampleComponent>TIP: You may provide multiple utility classes per each prop, as well as use variations such as dark:bg-green-500.
What's Next?
Choose your own adventure. We recommend you review each section listed below.
Learn more about Skeleton's Tailwind features.
Tailwind Features →Learn more about Skeleton's Svelte features.
Svelte Features →Learn more about Skeleton's utility features.
Utility Features →