Core API

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 documentation covering Skeleton’s core features.

• 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 utilities classes generated by @theme injection.

TIP: If a class is not available by default, consider using Tailwind’s arbitrary syntax .

@base

Extends Tailwind’s base layer with a set of opinionated global styles. View details here .

@theme

Uses Tailwind’s @theme to implement a variety of new properties and utility classes.

Animations

Provides keyframe-driven animation utilities used by Skeleton’s internal components.

Colors

Extends colors to include the Skeleton color palette .

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

Brand

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

Color Pairings

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

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

Edges

Sets the default width for Tailwind’s border, ring, and outline utilities to match theme values.

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

Border Radius

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

Corner Shape

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

NOTE: this is an emerging feature limited browser support. Make sure to test progressive fallbacks.

Element Sizes

A roster of element sizes matching Tailwind’s built-in --type-* scale. These are the basis for button, badge, chip, and field sizes. As well as enabling uniform icons sizes . Primarily used with size-*, w-*, and h-* properties.

NOTE: Since sizing is always derived from Tailwind, no Skeleton theme properties are required.

Spacing

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

Typography

Introduces a typographic scale to all Tailwind font sizes and line-height properties 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.

Heading

Controls the style of the heading text.

Anchor

Controls the style of anchor links.

@utility

Presets

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

Tailwind Components

Allows you to style semantic HTML elements with utility classes.

Themes

Provides a hand curated set of themes for Skeleton.