Styling

Review best practices for implementing stylesheets, handling global styles, as well as how to styling each each component.

Stylesheets

Skeleton provides a set of modular stylesheets that adapt to your theme. The easiest option is to use the all.css stylesheet. Import the following in your root layout. Sandwich stylesheets between your theme and global stylesheet.

typescript

import '@brainandbones/skeleton/styles/all.css';

Stylesheet	Description	View Source
`all.css`	A universal stylesheet that imports all stylesheets in the optimal order.	all.css

@Tailwind Directives

Skeleton's stylesheet provide the required @tailwind directives. Drop the following from your global stylesheet (ex: /src/app.postcss for SvelteKit)

css

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

⚠️

IMPORTANT: Do not skip this step, otherwise your styles will not display as expected.

Global Stylesheet

Here's a few suggested best practices to follow when creating global styles:

Ensure your @tailwind directives are imported only once per project. The all.css stylesheet handles this for you.
Wrap your core page elements within a main element. The App Shell component handles this for you.
The ideal use case for Tailwind @apply is defining global styles. Please be leery of premature abstraction.
Utilize the CSS :not pseudo-class to exclude and avoid conflicts with inherent component styles.
You can overwrite any imported stylesheet styles in your global stylesheet.

Styling Components

Skeleton components automatically adapt to your theme. If you would like to customize a single component, see the instruction below.

Using Component Props

All components support style props that accept Tailwind utility classes. See each component's documentation for details.

html

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

Appending Arbitrary Classes

All components support the standard class attribute, allowing you to pass any valid CSS or Tailwind class.

html

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

Targetting Component Elements

Keep in mind that components are a single line element that contains a set of HTML elements within their template. This means you should be mindful of your target, as the class attribute is only applied to the top-most parent element in the template. In some cases you may need to generate a chained class definition, though we advise using this technique sparingly.

css

.my-custom-class .some-child-element { @apply bg-red-500; }

html

<Menu class="my-custom-class">...</Menu>

Component Element Classes

If you inspect rendered components using your browser inspector, you'll note that most have named classes, like crumb-separator for the breadcrumb component.

html

<div class="crumb-separator ...">&rarr;</div>

If you wish to adjust the styling of this element, you can target the .crumb-separator class in your global stylesheet like so.

css

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

Important

Note that when overwriting styles, you may need to mark the style important to take precedence.

html

<Tab class="!p-10">Big</Tab>

css

.crumb-crumb { @apply !text-green-500; }

Next, let's create and implement a custom theme.

Create a Theme