Skip to content
Get packs

vanilla-extract

Write CSS styles in TypeScript; they compile to static CSS files at build time.

GitHub Download @vanilla-extract/integration@8.0.11
Stars
10.4k
Forks
362
Licence
MIT
Language
TypeScript
Last update
5 days ago
Type
Library

What it is

vanilla-extract lets you write styles in TypeScript or JavaScript files named .css.ts. At build time those files are turned into ordinary static CSS, so none of the styling code ends up in the shipped JavaScript. Class names are scoped locally, similar to CSS Modules, and it supports CSS variables and themes.

  • Define a theme with createTheme and reuse its variables across component styles
  • Write scoped style() classes in .css.ts files and apply them in markup
  • Generate variable-based calc expressions with the included utils
  • Use the official Sprinkles package for atomic CSS on top of vanilla-extract

Great for

  • Front-end developers who want type-checked styles in TypeScript
  • Teams using React, or any other front-end framework, or no framework at all
  • Projects that want build-time CSS output without a runtime styling cost
  • Developers who want theme support with CSS variables

Not ideal for

  • Non-developers or people who only write plain CSS, since it requires a build setup and TypeScript knowledge
  • Projects that need styles computed at runtime from user input; the README mentions an optional runtime API, but the zero-runtime path does not do this
Step-by-step guide: how to use vanilla-extractInstall, first run, examples, tips and FAQs
styled-components vs vanilla-extractEmotion vs vanilla-extractLinaria vs vanilla-extractSass vs vanilla-extract

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · A build tool or bundler configured for vanilla-extract (see documentation site)

    Clone the repository

    git clone https://github.com/vanilla-extract-css/vanilla-extract
  2. 2

    Run it

    • Follow the getting-started guide at vanilla-extract.style to configure your build tooling
    • Create a styles.css.ts file and export a style() or createTheme() result
    • Import the exported class names into your TypeScript or JavaScript markup and build
  3. 3

    Get the most out of it

    • Try the CodeSandbox example linked in the README before setting up a project
    • Use createTheme to support multiple simultaneous themes without globals
    • Use the calc utilities for variable-based calc expressions
    • Consider Sprinkles if you want a higher-level atomic CSS approach

Downloads

Source code (.zip)master branch · straight from GitHubRelease @vanilla-extract/integration@8.0.11Release notes and sourceOfficial website & docsvanilla-extract.style

Strengths

  • Styles are generated at build time, so no styling code is shipped to the browser
  • Type-safe styles through CSSType, with class names scoped locally
  • MIT license and an active project with about 10k GitHub stars

Trade-offs

  • Requires configuring build tooling before it works, so setup is not instant
  • The README is brief on specifics; detailed setup and API lives on the documentation site

How it compares

ProjectStarsTypeLevelUpdatedBest for
vanilla-extract (this)10.4kLibraryintermediate5 days agoFront-end developers who want type-checked styles in TypeScript
sass15.4kOtherintermediate6 days agoDevelopers who want to read how specific Sass language features are defined
linaria12.4kLibraryintermediate4 days agoReact or other JavaScript teams who want CSS-in-JS without a runtime styling cost

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.