Styling

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

Skeleton Stylesheets

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.

Via Component Props

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.

If a style prop is not available, you can still provide arbitrary utility classes via a standard class attribute. These styles are always applied to the parent element in the component template.

html 
<ExampleComponent class="text-3xl px-10 py-5">Skeleton</ExampleComponent>

If you need to target deeper than the parent element, we recommend using Tailwind's arbitrary variant syntax.

html 
<ExampleComponent class="[&>.foo-label]:p-4">...</ExampleComponent>

This will affect the Parent > .foo-label element and apply a Tailwind class of p-4.

Skeleton components include selector classes, such as .avatar-image within the Avatar component. Selector classes are always the first listed.

html 
<img class="avatar-image ...">...</img>

Use these selector classes to target and provide global style overrides to all instances of this feature in your global stylesheet.

css 
.avatar-image { @apply border-2 border-red-500; }
TIP: in some cases you may need to use ! important or style both the light/dark mode Tailwind variants to give precedence.

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 →