0Pricing
CSS Academy · Lesson

Vanilla Extract: Zero-Runtime CSS-in-JS

Write type-safe CSS with Vanilla Extract that generates static CSS files at build time.

Vanilla Extract: Zero-Runtime CSS-in-JS is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is Vanilla Extract?

Vanilla Extract is a CSS-in-JS library that generates zero runtime overhead. CSS is defined in TypeScript and compiled to static CSS files at build time — giving you type safety without runtime style injection.

Key Principle

Unlike styled-components or Emotion, Vanilla Extract runs entirely at build time. The JavaScript import is the API for authoring; the output is plain CSS files. No JavaScript runs on the client to apply styles.

File Convention

Vanilla Extract files use the .css.ts extension:

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

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

Using in Components

Import the exported class name and apply it:

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

Theme Contracts

The most powerful Vanilla Extract feature: define a theme contract (a token shape) and create multiple themes that implement it:

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

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

Create multiple variants of a style without repetition:

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

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

Recipes with @vanilla-extract/recipes

The recipe function from the recipes package combines base styles and variants elegantly:

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

Sprinkles for Utility Classes

@vanilla-extract/sprinkles generates utility classes from a token set — like a type-safe, zero-runtime Tailwind:

Type Safety

Since styles are TypeScript objects, you get full IDE autocomplete and type checking for CSS property names and values. Typos in property names are caught at build time, not runtime.

Build Tool Integration

Vanilla Extract integrates with Vite, webpack, esbuild, and Next.js via dedicated adapters. The extracted CSS is served as a static file.

When to Choose Vanilla Extract

Choose Vanilla Extract when you want:

  • Full TypeScript type safety for your styles
  • Zero runtime CSS-in-JS overhead
  • Static CSS output for maximum performance
  • A robust theming system with type-checked token contracts

Quick Check

What is the key performance advantage of Vanilla Extract over runtime CSS-in-JS like styled-components?

Recap

Vanilla Extract is a TypeScript-first, zero-runtime CSS-in-JS library. Define styles in .css.ts files using type-safe JavaScript objects. Build time generates static CSS files. Theme contracts provide type-checked multi-theme support. styleVariants and recipe handle component variants elegantly. The zero runtime cost makes it ideal for performance-critical applications.

Frequently asked questions

Is the “Vanilla Extract: Zero-Runtime CSS-in-JS” lesson free?

Yes — the full text of “Vanilla Extract: Zero-Runtime CSS-in-JS” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Vanilla Extract: Zero-Runtime CSS-in-JS”?

Write type-safe CSS with Vanilla Extract that generates static CSS files at build time. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Vanilla Extract: Zero-Runtime CSS-in-JS” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Styled-components: Tagged Template Literals
  2. Emotion: css() and styled()
  3. CSS Modules: Scoped Styles
  4. Vanilla Extract: Zero-Runtime CSS-in-JS
← Back to CSS Academy