vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

Type-safe static CSS

All styles generated at build time — just like Sass, LESS, etc, but with the power of TypeScript.

First-class theming

Create a single global theme or create multiple themes, all with type-safe token contracts.

Framework agnostic

Official integrations are provided for webpack, esbuild, Vite and Next.js.

Built for extension

Type-safe theming

Define themes with deeply nested token contracts, then let TypeScript do the heavy lifting. Never mess up a variable again.

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'aquamarine',
    accent: 'honeydew',
  },
});

export const brandedSection = style({
  backgroundColor: vars.color.brandd,
});

Variables, the way they were intended

Define and consume variables without abstraction. All of your favourite CSS variable patterns can be translated to vanilla-extract.

import { style, createVar } from '@vanilla-extract/css';

const shadowColor = createVar();

export const shadow = style({
  boxShadow: `0 0 10px ${shadowColor}`,
  selectors: {
    '.light &': {
      vars: { [shadowColor]: 'black' }
    },
    '.dark &': {
      vars: { [shadowColor]: 'white' }
    },
  },
});

Organise your styles with ease

Group style variants into separate collections, then look them up by name. No awkward naming conventions required.

import { styleVariants } from '@vanilla-extract/css';

export const background = styleVariants({
  primary: { background: 'navy' },
  secondary: { background: 'blue' },
  tertiary: { background: 'aqua' },
});

export const color = styleVariants({
  neutral: { color: 'black' },
  secondary: { color: 'gray' },
  link: { color: 'blue' },
});

Generate real stylesheets

Best-in-class developer experience without the runtime cost. Don’t ship a dynamic CSS engine to your users — ship regular CSS.

:root {
  --space-none__ya5b7b0: 0;
  --space-small__ya5b7b1: 4px;
  --space-medium__ya5b7b2: 8px;
  --space-large__ya5b7b3: 12px;
}

.Hero_container__1ldw6lo0 {
  padding: var(--space-medium__ya5b7b2);
}