The heart of Skeleton is our framework agnostic core package. This adapts and extends Tailwind to introduce our global styles, color system, typography, and more. This section details all available Skeleton-provided utility classes and theme properties.
@base
Extends Tailwind’s base layer with a set of opinionated global styles.
View Global Styles
- Sets the root color scheme to match Dark Mode settings.
- Updates scrollbars to utilize theme colors.
- Updates global text selection to utilize theme colors.
- Defines the
<body>background colors and base font styles. - Implements global default styles for disabled states, such as buttons.
@theme
Uses Tailwind’s @theme to implement a variety of new properties and utility classes.
View Theme Properties
Colors
Extends colors to include the Skeleton color palette.
| Class | Theme Property |
|---|---|
[property]-[color]-[shade] | —color-[color]-[shade] |
[property]-[color]-contrast-[shade] | —color-[color]-contrast-[shade] |
body-color | —body-background-color |
body-color-dark | —body-background-color-dark |
Color Pairings
Extends colors to implement Color Pairing, which balance colors between light and dark mode.
| Class | Theme Property |
|---|---|
[property]-[color]-[shade]-[shade] | —color-[color]-[shade]-[shade] |
Spacing
Integrates Tailwind’s spacing property to modify dynamic scaling for various utility classes.
| Class | Theme Property |
|---|---|
| (various) | —spacing |
Typography
Introduces a typographic scale to all Tailwind font sizes using the following formula.
--text-{size}: calc({remSize} * var(--text-scaling));--text-{size}--line-height: calc(calc(1 / {remSize}) * var(--text-scaling));Base
Controls the style of the global page text.
| Class | Theme Property |
|---|---|
base-font-color | —base-font-color |
base-font-color-dark | —base-font-color-dark |
base-font-family | —base-font-family |
base-font-size | —base-font-size |
base-line-height | —base-line-height |
base-font-weight | —base-font-weight |
base-font-style | —base-font-style |
base-letter-spacing | —base-letter-spacing |
Heading
Controls the style of the heading text.
| Class | Theme Property |
|---|---|
heading-font-color | —heading-font-color |
heading-font-color-dark | —heading-font-color-dark |
heading-font-family | —heading-font-family |
heading-font-size | —heading-font-size |
heading-line-height | —heading-line-height |
heading-font-weight | —heading-font-weight |
heading-font-style | —heading-font-style |
heading-letter-spacing | —heading-letter-spacing |
Anchor
Controls the style of anchor links.
| Class | Theme Property |
|---|---|
anchor-font-color | —anchor-font-color |
anchor-font-color-dark | —anchor-font-color-dark |
anchor-font-family | —anchor-font-family |
anchor-font-size | —anchor-font-size |
anchor-line-height | —anchor-line-height |
anchor-font-weight | —anchor-font-weight |
anchor-font-style | —anchor-font-style |
anchor-letter-spacing | —anchor-letter-spacing |
anchor-text-decoration | —anchor-text-decoration |
anchor-text-decoration-active | —anchor-text-decoration-active |
anchor-text-decoration-focus | —anchor-text-decoration-focus |
anchor-text-decoration-hover | —anchor-text-decoration-hover |
Radius
Extends Tailwind’s radius properties with theme-specific sizes.
| Class | Theme Property |
|---|---|
rounded-base | —radius-base |
rounded-container | —radius-container |
Edges
Sets the default width for border, divide, and ring width to match the active theme properties.
| Class | Theme Property |
|---|---|
border | —default-border-width |
ring | —default-ring-width |
divide | —default-divide-width |
@utility
View Utilites
Tailwind Components
Allow you to style semantic HTML elements with utility classes.
@variant
View Variants
Themes
Enables you to target and style elements for a particular theme.
<div class="bg-green-500 theme-cerberus:bg-red-500">...</div><div class="bg-green-500 theme-mona:bg-red-500">...</div><div class="bg-green-500 theme-vox:bg-red-500">...</div>Optional
Presets
Provides a canned set of styles for use with buttons, badges, cards, and more.
Browse Presets
Preset Themes
Provides a hand curated set of themes for Skeleton.
Browse Themes