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.
TIP: You may provide multiple utility classes per each prop, as well as use variations such as
Via the Class Attribute
If a style prop is not available, you can still provide arbitrary utility classes via a standard
These styles are always applied to the parent element in the component template.
Tailwind's Arbitrary Variants
If you need to target deeper than the parent element, we recommend using Tailwind's arbitrary variant syntax.
This will affect the Parent > .foo-label element and apply a Tailwind class of
Global Styles Overrides
Skeleton components include selector classes, such as
.avatar-image within the
Avatar component. Please note that selector classes are always the first listed.
Use these selector classes to target global style overrides to all instances of this feature in your global stylesheet.
In some cases you may need to use
style light and dark mode variants to give precedence.