Tailwind Plugin

The heart of Skeleton is our powerful Tailwind Plugin. This adapts and extends Tailwind to handle Skeleton’s global 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

Extends borders, rings, outlines, and divides.

Spacing

Introduces a scalable spacing system to Tailwind.

Utilities

New and powerful utility classes introduced 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

Type Scale

Implements a typographic scale into using the following formula. --type-scale-factor is defined in your theme.

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.