1. get started
  2. plugin

Tailwind Plugin

Skeleton operates as a superset of Tailwind, using a powerful plugin to extend utility classes and styles.

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.

View Base Styles →

These can be disabled via Skeleton’s plugin settings.

tailwind.config
plugins: [
skeleton({
base: false,
}),
];

Components

Skeleton introduces a suite of powerful Tailwind components.

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

ClassTheme Property
[style]-[color]-[shade]—color-[color]-[shade]
[style]-[color]-contrast-[shade]—color-[color]-contrast-[shade]
--—color-[color]-contrast-light
--—color-[color]-contrast-dark
body-color—body-background-color
body-color-dark—body-background-color-dark

Edges

ClassTheme Property
rounded—radii-default
rounded-container—radii-container
border—border-width-default
ring—ring-width-default
outline—outline-width-default
divide—divide-width-default

Spacing

Introduces a scalable spacing system to Tailwind.

Browse Spacing →


Utilities

New and powerful utility classes provided by Skeleton.

Color Pairings

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

Browse Color Pairings →

Presets

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

Browse Presets →

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))
ClassTheme PropertyRemPixels
type-scale-1—type-scale-10.75rem12px
type-scale-2—type-scale-20.875rem14px
type-scale-3—type-scale-31rem16px
type-scale-4—type-scale-41.125rem18px
type-scale-5—type-scale-51.25rem20px
type-scale-6—type-scale-61.5rem24px
type-scale-7—type-scale-71.875rem30px
type-scale-8—type-scale-82.25rem36px
type-scale-9—type-scale-93rem48px
type-scale-10—type-scale-103.75rem60px
type-scale-11—type-scale-114.5rem72px
type-scale-12—type-scale-126rem96px
type-scale-13—type-scale-138rem128px

Base

Controls the style of the default page text.

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

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

ClassTheme 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