Styling

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

Skeleton Stylesheets

Skeleton provides a set of stylesheets for elements and components. Import these in your app's root layout per your preferred framework.

The CLI will automatically import all.css into src/routes/+layout.svelte.

typescript 
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.

StylesheetDescriptionView Source
all.css A universal stylesheet that imports all stylesheets in the optimal order. all.css

Global Stylesheet

The location of your app's global stylesheet differs per framework.

Your global stylesheet is located in /src/app.postcss. The CLI will automatically purge @tailwind directives from Svelte-Add and add any required styles.

Import Order

Skeleton has strict requirements for stylesheet import order. Please ensure your imports conform to the following order before you continue.

OrderStylesheetReason
1. Theme Stylesheet Houses your themes use CSS properties for colors, border radius, etc.
2. Skeleton Stylesheet(s) Imports Tailwind directives, generates design tokens, styles elements and components.
3. Global Stylesheet Keep last so you can override the above styles. Project-specific styles go here.

We've provided an example below for reference.

ts 
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '@skeletonlabs/skeleton/styles/all.css';
import '../app.postcss'; // Substitute with your framework's global stylesheet

How to Customize Styles

Learn how to customize Skeleton components and elements below.

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-accent-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.

Tailwind Elements and Svelte Components make use of unique selector classes, such as .crumb-separator for the Breadcrumb seperator element. Use these classes target and provide global overrides in your app's global stylesheet.

html 
<!-- Selector classes are always the first listed in the template element. -->
<div class="crumb-separator ...">{seperator}</div>

Add the following to your global stylesheet to override the seperator's text color:

css 
.crumb-separator { @apply !text-red-500; }
TIP: in some cases you may need to use ! important to give precedence, or style both the light/dark mode variations.

View the optional walkthroughs for creating an example app using Skeleton.

Framework Guides →