Core API

The heart of Skeleton is the framework agnostic core package. This adapts and extends Tailwind to introduce Skeleton's global styles, color system, typography, and more. Each section below details available theme properties and utility classes.

Introduction

Below you will find documentation covering Skeleton’s core features.

• Skeleton Theme Property - represents the CSS design token within each Skeleton theme file.
• Tailwind @theme Property - represents the @theme property provided to Tailwind.
• Class - represents one or more utility classes generated by @theme injection.

@base

Extends Tailwind’s base layer with a set of opinionated global styles. Refer to Globals for details.

@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 Tailwind’s color palette with Skeleton theme-specific color values. Refer to Colors for details.

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

Brand

Represents a variable accent color that can be tailored for light and dark mode. Refer to Brand Color for details.

Color Pairings

Extends colors to implement Color Pairing, balancing colors for light and dark mode using the CSS light-dark() function.

NOTE: Pairing 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

Enables the corner-shape utility, and sets the default base and container sizes respectively.

NOTE: this is an emerging feature with limited browser support. Make sure to utilize progressive enhancement.

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. Can also be used with size-*, w-*, h-*, and more (ex: size-elem-xl).

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 base (aka global) default page text.

Heading

Controls the style of the heading text.

Anchor

Controls the style of anchor links.

@utility

Implements Skeleton’s Tailwind-specific components and utilities.

Presets

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

Tailwind Components

Allows you to style semantic HTML elements with utility classes.

Themes

Provides a curated set of handcrafted themes for Skeleton.

Arbitrary Syntax

If a certain Tailwind-generated utility class is not available to represent a Skeleton theme property, consider using Tailwind’s arbitrary syntax to supplement this.

<p class="[font-style:var(--typo-heading--font-style)]">Heading Font Style</p>