Theme
The theme property defines your design system with 7 optional token categories. All tokens generate CSS custom properties and Tailwind CSS utility classes.
colors
Named color tokens as key-value pairs. Each becomes a CSS variable (--color-{name}) and Tailwind class (bg-{name}, text-{name}).
fonts
Typography configuration for heading, body, and mono fonts. Supports family, fallback, weights, size, line height, and Google Fonts URL.
spacing
Named spacing tokens as Tailwind class strings. Define container widths, section padding, gaps, and component spacing.
shadows
Named shadow tokens as CSS box-shadow values. Each becomes a shadow-{name} utility.
animations
Custom @keyframes animations with enabled flag, duration, timing function, iteration count, and keyframe definitions.
breakpoints
Custom responsive breakpoints as pixel values. Each becomes a min-width media query for responsive utilities.
borderRadius
Named border radius tokens as CSS values. Each becomes a rounded-{name} utility class.