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 root layout, which differs per each framework.

Import stylesheets in 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. SvelteKit and Vite users must make one quick modification.

Your global stylesheet can be found at /src/app.postcss.

Svelte-Add automatically includes @tailwind directives in your global stylesheet. However, Skeleton handles this for you, so please remove the following:

css 
/* NOTE: If present, remove any @tailwind directives: */

@tailwind base;
@tailwind components;
@tailwind utilities;

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.

How to Customize Styles

We've provided a few tips for customizing Skeleton elements or components.

Via Component Props

This is the recommended manner to style most components. Each component provides a set of style props (aka properties) that allow you to override the default style classes. See a list of available options under the "Props" tab in the component documentation.

html 
<ExampleComponent background="bg-accent-500" text="text-yellow-500">Skeleton</ExampleComponent>
TIP: You may provide multiple utility classes per each prop, and use variations such as dark:bg-green-500.

If a style prop is not available, you can still provide arbitrary utility classes via the 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="[&>.ExampleComponent-label]:p-4">...</ExampleComponent>

Tailwind Elements and Svelte Components make use of unique selector classes, such as .crumb-separator for the Breadcrumb seperator element. Use these classes target global overrides in your 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 →