Skeleton — UI Toolkit for Svelte + Tailwind

Skeleton Stylesheets

Skeleton provides a set of modular stylesheets for styling elements and components. The import location differs per framework.

Import all 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.

When using Svelte-Add this creates @tailwind directives in your global stylesheet. This is not recommended as Skeleton handles this as part of the stylesheet imports above. If present, remove the following from your global stylesheet.

css

/* If present, drop the following 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.

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 elemens and components.
3.	Global Stylesheet	Keep this last so you can override styles provided by any of the above.

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.