Vanilla Extract: Zero-Runtime CSS-in-JS
Write type-safe CSS with Vanilla Extract that generates static CSS files at build time.
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.
All lessons in this course
- Styled-components: Tagged Template Literals
- Emotion: css() and styled()
- CSS Modules: Scoped Styles
- Vanilla Extract: Zero-Runtime CSS-in-JS