Zero-runtime
Stylesheets in
TypeScript.

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

$
npm install @vanilla-extract/css

Get started

GitHub

styles.css.ts

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

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
    white: '#fff'
  },
  space: {
    small: '4px',
    medium: '8px',
  }
});

export const hero = style({
  backgroundColor: vars.color.brandd,
  color: vars.color.white,
  padding: vars.space.large
});

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

Use libraries like Sprinkles, Recipes and Dessert Box — or create your own!

Leverage the full power of CSS & TypeScript

Write maintainable CSS at scale without sacrificing platform features. Variables, selectors, pseudo‑classes, media/feature/container queries, keyframes, font‑face and global styles are all supported.

styles.css.ts

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

export const className = style({
  display: 'flex',
  flexDirection: 'column',
  selectors: {
    '&:nth-child(2n)': {
      background: 'aliceblue'
    }
  },
  '@media': {
    'screen and (min-width: 768px)': {
      flexDirection: 'row'
    }
  }
});

Type-safe theming

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

styles.css.ts

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.

styles.css.ts

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.

styles.css.ts

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.

output.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);
}