Frontile extends Tailwind CSS with additional design tokens for building consistent, accessible user interfaces. These tokens automatically generate Tailwind utility classes.
Design tokens are named entities that store visual design attributes. They provide a consistent language for design decisions across your application. Frontile's tokens use Tailwind v4's @theme directive to define CSS variables that automatically generate utility classes.
For example, defining --radius: 8px in your theme automatically generates the rounded utility class.
Frontile adds these design token categories to Tailwind:
Semantic color system with five categories (neutral, primary, success, danger, warning) that automatically adapt between light and dark themes.
Generated utilities: bg-primary, text-danger-strong, border-success-soft
Text styles with semantic sizing across six categories (marquee, header, body, code, caption, label) built on a modular scale.
Generated utilities: text-header-lg, text-body-md, text-label-sm
Consistent icon sizing scale that pairs harmoniously with typography.
Generated utilities: size-icon-sm, size-icon-md, size-icon-lg
Border widths and radius tokens for consistent UI styling.
Generated utilities: border-thin, border-heavy, rounded-xl, rounded-pill
Shadow system for creating visual depth with six elevation levels (0-5).
Generated utilities: shadow-elevation-1, shadow-elevation-3
Background color system for creating distinct surface layers in your UI.
Generated utilities: bg-surface-app, bg-surface-modal, bg-surface-overlay-soft, bg-surface-lift-soft
Frontile uses Tailwind v4's @theme directive to define tokens as CSS variables:
@theme {
--radius: 8px; /* Generates: rounded */
--radius-xl: 12px; /* Generates: rounded-xl */
--size-icon-md: 16px; /* Generates: size-icon-md */
}
These variables:
For layout, spacing, flexbox, grid, and other standard utilities, refer to the Tailwind CSS documentation. Frontile uses Tailwind as-is for these utilities and only documents the design tokens it adds.