Utilities

The following features are provided by Skeleton’s feature-rich Tailwind Plugin. This dramatically extend the feature set of Tailwind, including: base styles, colors, typography, and more. Learn how to use each custom utility class or access theme CSS custom properties directly.

Base

Provides a set of opinionated base styles to your document.

These can be disabled in the Skeleton plugin settings.

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

Components

Skeleton introduces a suite of powerful Tailwind component. See the Tailwind section for more information.

Extends

The following are considered extensions to the existing Tailwind capabilities.

Colors

Please refer to Colors for details.

Edges

Spacing

Please refer to Spacing for details.

Utilities

New and powerful utility classes provided by Skeleton.

Color Pairings

Please refer to Color Pairings for details.

Presets

Please refer to Presets for details.

Typography

Please refer to Typography for details. A typography scale is generated using the following formula.

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