Core API · Skeleton

The heart of Skeleton is the 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 theme properties and utility classes.

Introduction

Below you will find a mix of links to detailed documention, along with tables describing the following:

Skeleton Theme Property - represents the CSS design token in each Skeleton them file.
Tailwind @theme Property - represents the @theme property provided to Tailwind.
Class - represents one or more example utilities classes generated by @theme injection.

If a class is not shown, consider using Tailwind’s arbitrary syntax .

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

Key	Accepted Values
Property	`accent`, `bg`, `border`, `caret`, `decoration`, `divide`, `fill`, `outline`, `ring`, `shadow`, `stroke`, `text`
Color	`primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `surface`
Shade	`50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950`

Represents the most common and standard color properties available to use.

Skeleton Theme Property	Tailwind @theme Property	Class
--color-[color]-[shade]	--color-[color]-[shade]	`[property]-[color]-[shade]`
--color-[color]-contrast-[shade]	--color-[color]-contrast-[shade]	`[property]-[color]-contrast-[shade]`
--body-background-color	--body-background-color	`body-background-color`
--body-background-color-dark	--body-background-color-dark	`body-background-color-dark`

Brand

Represents the most prominant theme color in terms of color and shade. Can be tailored for light and dark mode.

Skeleton Theme Property	Tailwind @theme Property	Class
--color-brand-light	--color-brand-light	`[property]-brand-light`
--color-brand-contrast-light	--color-brand-contrast-light	`[property]-brand-contrast-light`
--color-brand-dark	--color-brand-dark	`[property]-brand-dark`
--color-brand-contrast-dark	--color-brand-contrast-dark	`[property]-brand-contrast-dark`

Color Pairings

Extends colors to implement Color Pairing , which balance colors between light and dark mode.

Skeleton Theme Property	Tailwind @theme Property	Class
--color-[color]-[shade]-[shade]	--color-[color]-[shade]-[shade]	`[property]-[color]-[shade]-[shade]`

NOTE: Pairings values are specific; shade 500 does not include a pairing.

Spacing

Integrates Tailwind’s spacing property to modify dynamic scaling for various utility classes.

Skeleton Theme Property	Tailwind @theme Property	Class
--spacing	--spacing	(various)

Typography

Introduces a typographic scale to all Tailwind font sizes using the following formula.

plaintext

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

Skeleton Theme Property	Tailwind @theme Property	Class
--typo-base—font-family	--font-typo-base	`font-typo-base`
--typo-base—font-size	--text-typo-base	`text-typo-base`
--typo-base—color-light	--color-typo-base-light	`[property]-typo-base-light`
--typo-base—color-dark	--color-typo-base-dark	`[property]-typo-base-dark`
--typo-base—line-height	--leading-typo-base	`leading-typo-base`
--typo-base—font-weight
--typo-base—font-style
--typo-base—letter-spacing	--tracking-typo-base	`tracking-typo-base`
--typo-base—font-stretch
--typo-base—font-kerning
--typo-base—text-shadow	--text-shadow-typo-base	`text-shadow-typo-base`
--typo-base—word-spacing
--typo-base—hyphens
--typo-base—text-transform

Heading

Controls the style of the heading text.

Skeleton Theme Property	Tailwind @theme Property	Class
--typo-heading—font-family	--font-typo-heading	`font-typo-heading`
--typo-heading—color-light	--color-typo-heading-light	`[property]-typo-heading-light`
--typo-heading—color-dark	--color-typo-heading-dark	`[property]-typo-heading-dark`
--typo-heading—font-weight
--typo-heading—font-style
--typo-heading—letter-spacing	--tracking-typo-heading	`tracking-typo-heading`
--typo-heading—font-stretch
--typo-heading—font-kerning
--typo-heading—text-shadow	--text-shadow-typo-heading	`text-shadow-typo-heading`
--typo-heading—word-spacing
--typo-heading—hyphens
--typo-heading—text-transform

Anchor

Controls the style of anchor links.

Skeleton Theme Property	Tailwind @theme Property	Class
--typo-anchor—font-family	--font-typo-anchor	`font-typo-anchor`
--typo-anchor—font-size	--text-typo-anchor	`text-typo-anchor`
--typo-anchor—color-light	--color-typo-anchor-light	`[property]-typo-anchor-light`
--typo-anchor—color-dark	--color-typo-anchor-dark	`[property]-typo-anchor-dark`
--typo-anchor—line-height	--leading-typo-anchor	`leading-typo-anchor`
--typo-anchor—font-weight
--typo-anchor—font-style
--typo-anchor—letter-spacing	--tracking-typo-anchor	`tracking-typo-anchor`
--typo-anchor—font-stretch
--typo-anchor—font-kerning
--typo-anchor—text-shadow	--text-shadow-typo-anchor	`text-shadow-typo-anchor`
--typo-anchor—word-spacing
--typo-anchor—hyphens
--typo-anchor—text-transform
--typo-anchor—text-decoration-line
--typo-anchor—text-decoration-color
--typo-anchor—text-decoration-style
--typo-anchor—text-decoration-thickness
--typo-anchor—text-underline-offset
--typo-anchor—text-underline-position
--typo-anchor—hover—text-decoration-line
--typo-anchor—hover—text-decoration-color
--typo-anchor—hover—text-decoration-style
--typo-anchor—hover—text-decoration-thickness
--typo-anchor—hover—text-underline-offset
--typo-anchor—hover—text-underline-position
--typo-anchor—active—text-decoration-line
--typo-anchor—active—text-decoration-color
--typo-anchor—active—text-decoration-style
--typo-anchor—active—text-decoration-thickness
--typo-anchor—active—text-underline-offset
--typo-anchor—active—text-underline-position
--typo-anchor—focus—text-decoration-line
--typo-anchor—focus—text-decoration-color
--typo-anchor—focus—text-decoration-style
--typo-anchor—focus—text-decoration-thickness
--typo-anchor—focus—text-underline-offset
--typo-anchor—focus—text-underline-position

Radius

Extends Tailwind’s radius properties with theme-specific sizes.

Skeleton Theme Property	Tailwind @theme Property	Class
--radius-base	--radius-base	`rounded-base`
--radius-container	--radius-container	`rounded-container`

Edges

Sets the default width for border, outline, and ring to match the active theme properties.

Skeleton Theme Property	Tailwind @theme Property	Class
--default-border-width	--default-border-width	`border`
--default-ring-width	--default-ring-width	`ring`
--default-outline-width	--default-outline-width	`outline`

IMPORTANT: never set outline to 0px as this would violate accessibility.

Corner Shape

Sets the default corner-shape for base elements and containers (e.g., squircle corners).

Skeleton Theme Property	Tailwind @theme Property	Class
--corner-shape-base
--corner-shape-container

@utility

View Utilities

Tailwind Components

Allows you to style semantic HTML elements with utility classes.

@variant

View Variants

Optional

Presets

Provides a canned set of styling for use with buttons, badges, cards, and more.

Browse Presets

Preset Themes

Provides a hand curated set of themes for Skeleton.

Browse Themes