vanilla-extract CSS

Write type-safe, zero-runtime CSS in TypeScript with vanilla-extract. Authors styles in .css.ts files, builds themes with CSS variable contracts, and generates atomic sprinkles utilities — all statically extracted at build time.

This skill helps you style apps with vanilla-extract's zero-runtime CSS-in-TS. It writes style() and styleVariants() in .css.ts files, defines theme contracts with createTheme and createThemeContract, builds a Sprinkles atomic utility layer, types tokens end to end, and extracts everything to static CSS at build time — no runtime cost, full TypeScript safety.

When to use

Use when you want CSS-in-TS with zero runtime overhead and full type safety — design-system theming with variable contracts, atomic utility generation, or locally-scoped component styles in a TypeScript codebase.

Examples

Themed variable contract

Type-safe light/dark themes

Use vanilla-extract createThemeContract to define a token contract and generate light and dark themes with createTheme in a .css.ts file

Atomic sprinkles

Build a utility styling layer

Set up vanilla-extract Sprinkles with responsive conditions for spacing, color, and display, then style a Card component with the generated atoms