Vanilla Extract
Write type-safe CSS in TypeScript that compiles to zero-runtime static CSS. Vanilla Extract gives you variables, theming, recipes, and sprinkles with the static performance of CSS modules.
This skill produces Vanilla Extract stylesheets with createTheme, createGlobalTheme, recipes (variant-driven components), and sprinkles (atomic utility generation). Covers Vite, Next.js, and Webpack plugin setup, plus migration from CSS-in-JS runtime libraries.
vanilla-extract css-in-ts zero-runtime design-system
When to use
Use when you want CSS-in-JS ergonomics with zero runtime cost (RSC-safe), when migrating off styled-components/Emotion for performance, or when building a type-safe theming system.
Examples
Button with recipe variants
Type-safe variant-driven button styling
Build a Vanilla Extract Button recipe with size (sm/md/lg), tone (primary/danger/ghost), and disabled variants
Sprinkles atomic system
Generate utility classes from design tokens
Configure Vanilla Extract sprinkles with responsive padding, color, and display utilities from a design token theme