Styling

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.

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

Via the Class Attribute

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.

<ExampleComponent class="text-3xl px-10 py-5">Skeleton</ExampleComponent>

Tailwind Arbitrary Variants

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

<ExampleComponent class="[&>.foo-label]:p-4">...</ExampleComponent>

This will affect the Parent > .foo-label element and apply a Tailwind class of p-4.

Global Styles Overrides

Skeleton components include selector classes, such as .avatar-image within the Avatar component. Selector classes are always the first listed.

<img class="avatar-image ...">...</img>

Use these selector classes to target and provide global style overrides to all instances of this feature in your global stylesheet.

.avatar-image { @apply border-2 border-red-500; }

TIP: in some cases you may need to use ! important or style both the light/dark mode Tailwind variants to give precedence.