Tailwind Plugin

Skeleton is powered by a fully featured Tailwind Plugin. This adapts and extends Tailwind to handle Skeleton’s base styles, color system, typography, and more. The following API details all available Skeleton utility classes and the theme-specific CSS custom properties.

Base

Provides a set of opinionated base styles to your document.

These can be disabled via Skeleton’s plugin settings.

plugins: [
    skeleton({
        base: false,
    })
]

Components

Skeleton introduces a suite of powerful Tailwind components.

Extends

The following are considered extensions to Tailwind default capabilities.

Colors

Extends the Tailwind palette to accept Skeleton’s theme colors. Please refer to Colors for more information.

Edges

Spacing

Introduces a scalable spacing system to Tailwind.

Utilities

New and powerful utility classes provided by Skeleton.

Color Pairings

Introducing a pairing system to balance colors between light and dark mode.

Presets

Provides a canned set of background and foreground styles for use with buttons, badges, cards, and more.

Typography

Please refer to Typography for more information.

Type Scale

Implements a typographic scale into Tailwind using the following formula.

calc({remSize} * var(--type-scale-factor))

Base

Controls the style of the default page text.

Heading

Controls the style of the heading text.

Anchor

Controls the style of anchor links.