Styling

This section covers basic techniques for styling Skeleton elements and components below. View our comprehensive guide to styling to learn more.


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.

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

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

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

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

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