Design Tokens
TailwindProvides a set of utility classes that adjust based on your theme settings.
Stylesheets
Package
Source
Doc
Usage
Skeleton themes are paired with a powerful design token system to create utility classes based on theme settings. These cover common styles for backgrounds, border radius, fonts, and more. In fact, most components use these tokens as the default settings, which means components auto-adapt to your theme style with minimal configuration out of the box.
Backgrounds
| Class | Values | Description |
|---|---|---|
bg-[color]-backdrop-token
|
primary | accent | tertiary | warning | surface | Background styles for modal backdrops. |
bg-[color]-hover-token
|
primary | accent | tertiary | warning | surface | Background styles for hoverable elements. |
bg-[color]-active-token
|
primary | accent | tertiary | warning | surface | Background styles for active selected elements. |
bg-[color]-[pairings]-token
|
50-900 | 100-800 | 200-700 | 300-600 | 400-500 | See Reference. The pairings can be reversed as well. (ex: 900-50) |
Border Radius
| Class | Values | Description |
|---|---|---|
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 large small elements. |