Features
- Write styles in TypeScript with full type checking
- Zero runtime — all CSS generated at build time
- Locally scoped class names by default
- Sprinkles API for utility-class generation
- Recipes API for variant-driven component styles
Pros
- Full TypeScript type safety for styles
- No runtime overhead — pure CSS output
- Framework-agnostic (works with React, Vue, Svelte, etc.)
Cons
- Styles must be in separate .css.ts files
- Less ergonomic than colocated CSS-in-JS solutions
- Build step required for CSS extraction
Overview
vanilla-extract is a CSS-in-TypeScript library that generates static CSS at build time with zero runtime overhead. You write your styles in .css.ts files using TypeScript, and the library extracts them into plain CSS files during the build process, giving you type-safe styles with no client-side performance cost.
The library provides APIs for different abstraction levels: style() for basic scoped styles, styleVariants() for variant maps, recipe() for component variants, and sprinkles() for generating utility classes similar to Tailwind. All styles are locally scoped by default, preventing naming collisions.
When to Use
vanilla-extract is the right choice when you want type-safe CSS without any runtime cost, when building framework-agnostic design systems, or when your team values the safety of TypeScript extending to styles. It’s ideal for projects that need the DX of CSS-in-JS without the performance trade-offs.
Getting Started
npm install @vanilla-extract/css// styles.css.ts
import { style } from "@vanilla-extract/css";
export const button = style({
backgroundColor: "blue",
color: "white",
padding: "8px 16px",
borderRadius: 4,
":hover": { backgroundColor: "darkblue" },
});