Styling

This section covers best practices for stylesheet imports and overriding component styles.

Skeleton Stylesheets

The CLI will automatically import Skeleton's all.css stylesyeet into src/routes/+layout.svelte.

Import Order

Important

Skeleton has strict requirements for stylesheet import order. We've explained the purpose of each stylesheet below.

OrderStylesheetFilenameReason
1. Theme Stylesheet theme-[name].css Houses your themes use CSS properties for colors, border radius, etc.
2. Skeleton Stylesheet(s) all.css Imports Tailwind directives and Skeleton stylesheets in the recommended order.
3. Global Stylesheet app.postcss Keep last so you can override styles. Your project-specific styles go here.

Here's an example of the stylesheets using the Skeleton theme.

ts 
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '@skeletonlabs/skeleton/styles/all.css';
import '../app.postcss';

Customizing Styles

Learn the basics with our quick start guide below, or view our comprehensive guide here.

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.

html 
<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 →