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