Skeleton — UI Toolkit for Svelte + Tailwind

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 '@brainandbones/skeleton/styles/all.css';

We recommend all.css for most users. This includes everything required for Skeleton, with all imports in the correct order.

Stylesheet	Description	View 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 are required to make one quick modification.

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

⚠️

For SvelteKit and Vite projects the following steps is required. This will ensures all styles display properly.

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.

Order	Stylesheet	Reason
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.

Styling Components

Skeleton components automatically adapt to your theme. However, you may wish to customize your components and elements. View instruction for this below.

Via Component Props

This is the recommended way to style most components. Provide style "props" (aka properties) that allow you to provide utility classes to override styles. See a full list of available settings under the "Props" tab for each component's documentation.

html

<Tab background="bg-accent-500" style="bg-yellow-500">Prop Customized</Tab>

Via the Class Attribute

If a particular style prop is not provided, you can still provide arbitrary utility classes via the standard class attribute on any component. Note these classes are applied to the parent element in the component template.

html

<Tab class="text-3xl px-10 py-5">Big</Tab>

Tailwind Abitrary Variants

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

html

<Tab class="[&>.tab-label]:p-4">...</Tab>

Global Styles

Tailwind Elements and Svelte Components contain a unique selector classes, such as .crumb-separator for the Breadcrumb component seperator element. Use these to target global style overrides.

html

<!--  The first class is the "selector" class -->
<div class="crumb-separator ...">&rarr;</div>

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

css

.crumb-separator { @apply !text-red-500; }

Note that in some cases you may need to use ! important to give the class precedence.