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.

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

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.

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

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

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.

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.

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 →