explaingit

vanilla-extract-css/vanilla-extract

★ 10,370TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

Vanilla-extract lets you write CSS in TypeScript files with automatic scoping, type safety, and zero runtime cost, styles compile to static CSS at build time, never in the browser.

Mindmap

mindmap
  root((repo))
    What it does
      CSS in TypeScript
      Automatic class scoping
      Zero runtime cost
    Key features
      Type-safe values
      Theme system
      CSS Variables support
    Optional add-ons
      Sprinkles utility classes
    Works with
      Any framework
      Vite webpack esbuild
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Replace global CSS in a TypeScript project with scoped, type-safe styles that cannot accidentally break other components.

USE CASE 2

Set up a light mode and dark mode theme system that is fully type-checked and compiles to plain static CSS.

USE CASE 3

Use the Sprinkles add-on to create a utility-class system with type-safe design tokens similar to Tailwind.

Tech stack

TypeScriptCSS

Getting it running

Difficulty · moderate Time to first run · 30min

Requires configuring your bundler (Vite, webpack, esbuild, etc.) with the vanilla-extract plugin before styles will compile.

Use, copy, modify, and distribute freely for any purpose, including commercial projects, as long as you keep the MIT copyright notice.

In plain English

Vanilla-extract is a tool for writing CSS styles using TypeScript, a typed variant of JavaScript. Instead of writing styles in separate .css files with their own syntax, you write them in TypeScript files, and the tool converts them into regular CSS files when you build your project. The key point is that no JavaScript runs in the browser to apply the styles: everything is converted to plain static CSS before your site ships, so there is no performance cost at page load time. The problem it addresses is that standard CSS has no scope: a class name you define in one part of a project can accidentally affect elements in another part. Vanilla-extract generates unique class names automatically, so styles stay isolated to the component or module they belong to. It also supports CSS Variables (sometimes called custom properties), which allow you to define shared values like colors or spacing in one place and reuse them throughout your styles, but with the same scoping guarantees. A theme system is built in, allowing you to define multiple visual themes (for example, a light mode and a dark mode) and apply them without any global style collisions. The library also provides type checking on your style values, so if you mistype a color name or use an invalid CSS property, TypeScript will catch it before the code runs. Vanilla-extract works with any frontend framework or with no framework at all. There is an optional companion package called Sprinkles for teams who want a more structured, utility-based approach to applying styles. The project is released under the MIT license and was created with support from the Australian job-search company SEEK.

Copy-paste prompts

Prompt 1
Show me how to set up vanilla-extract in a Vite TypeScript project and write a scoped button style that won't conflict with anything else.
Prompt 2
Using vanilla-extract, create a theme with light and dark mode color variables and show me how to apply the dark theme to a page.
Prompt 3
How do I use vanilla-extract Sprinkles to build a utility class system with type-safe spacing and color tokens?
Open on GitHub → Explain another repo

← vanilla-extract-css on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.