Vanilla Extract

ELI5 — The Vibe Check

Vanilla Extract is CSS-in-JS with zero runtime cost. You write styles in TypeScript files at build time, and they compile to plain CSS class names. You get type-safe styles, theme variables, and all the CSS-in-JS DX without shipping a single byte of styling JavaScript to the browser.

Real Talk

Vanilla Extract is a zero-runtime CSS-in-TypeScript library. Styles are written in .css.ts files and compiled to static CSS at build time, producing standard class names. It provides type-safe themes, dynamic variants via the Sprinkles API (like type-safe Tailwind), and composes well with any framework.

Show Me The Code

// styles.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'blue',
  color: 'white',
  ':hover': { background: 'darkblue' },
});

// Component.tsx
import { button } from './styles.css';
<button className={button}>Click</button>

When You'll Hear This

"Vanilla Extract gives us type-safe styles that compile to zero-runtime CSS" / "Sprinkles from vanilla-extract is basically type-safe Tailwind"