Tailwind

Design Tokens

The Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.

Source Page Source

Skeleton utilizes a simple but powerful design token system to implement theme settings in elements and components. These represent the defaults for most elements and components, which means they auto-adapt based on your theme with minimal configuration out of the box. Best of all you can use these within your custom components as well!

Learn More

We recommend this conference talk by Brad Frost if you would like to learn more about the design token concept.

Theme Flow

Below is a visualization of how Skeleton uses your theme to control your UI. We start with your theme's CSS variables, then construct design token classes based on these variables, next components utilize these design token classes, then finally you construct your pages with sets of elements and components.

flow

Color Pairing Chart

Below is a visualization of color pairings in Skeleton. This is how we balance light and dark mode for your themes in practice. For example, the surface color swatch 50 is the lightest available color, so we utilize that for your light theme background color. While swatch 900 is the darkest, so vice versa. These two colors form a pair. We then generate design token classes for .bg-surface-50-900-token and bg-surface-900-50-token that automatically switch between these in light/dark mode respectively.

pairings

Backgrounds

ClassValuesDescription
.bg-[color]-backdrop-token Theme Colors Background styles for modal backdrops.
.bg-[color]-hover-token Theme Colors Background styles for hoverable elements.
.bg-[color]-active-token Theme Colors Background styles for active selected elements.
.bg-[color]-[pairings]-token Theme Colors
Color Pairing
Pairing values can be 50-900 or 900-50 format.

Border Radius

ClassValuesDescription
.rounded-token Border radius for small elements: buttons, badges, chips, etc.
.rounded-[corner]-token tl | tr | bl | br Corner border radius styles for small elements.
.rounded-container-token Border radius for large elements, such as cards and textareas
.rounded-[corner]-container-token tl | tr | bl | br Corner border radius styles for large elements.

Borders

ClassValuesDescription
.border-token Implements your theme's configured border size.
.border-[color]-[pairings]-token Theme Colors
Color Pairing
Pairing values can be 50-900 or 900-50 format.

Divide

Utility for controlling the border color between elements.

ClassValuesDescription
.divide-[color]-[pairings]-token Theme Colors
Color Pairing
Implements a text-decoration color. Pairing values can be 50-900 or 900-50 format.

SVG Fill Color

ClassValuesDescription
.fill-token The default responsive light/dark mode fill color.
.fill-on-[color]-token Theme Colors Provides an accessible foreground color.

Rings

Utilities for creating outline rings with box-shadows.

ClassValuesDescription
.ring-outline-token Creates a subtle transparent outline like Card elements.
.ring-[color]-[pairings]-token Theme Colors
Color Pairing
Pairing values can be 50-900 or 900-50 format.

Text

ClassValuesDescription
.font-heading-token Implements your theme's configured heading font family.
.font-token Implements your theme's configured base font family.
.text-token Implements your theme's configured base text color.
.text-on-[color]-token Theme Colors Provides an accessible foreground color.
.text-[color]-[pairings]-token Theme Colors
Color Pairing
Pairing values can be 50-900 or 900-50 format.

Text Decoration

ClassValuesDescription
.decoration-[color]-[pairings]-token Theme Colors
Color Pairing
Pairing values can be 50-900 or 900-50 format.

Accent

ClassValuesDescription
accent-[color]-token Theme Colors Provides an input accent-color.