vanilla-extract

Try it in 3 steps

1. 1

   Install the core package and Vite plugin

   Add the core package and Vite integration. Use the matching integration package when the project uses a different bundler.

   npm install @vanilla-extract/css npm install --save-dev @vanilla-extract/vite-pluginCopy
2. 2

   Configure the Vite plugin

   Add the plugin to vite.config.js or vite.config.ts so .css.ts files are processed during the build.

   import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; export default { plugins: [vanillaExtractPlugin()] };Copy
3. 3

   Create a style in a .css.ts file

   Import the generated class name into application code and verify that the build emits static CSS.

   import { style } from '@vanilla-extract/css'; export const container = style({ padding: 10 });Copy

Built with

• TypeScript

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• Biome25,880 Stars

  3 shared tag(s) · 1 shared category(s)

  combine formatting, linting, fixes, and editor diagnostics in one fast tool

  Rust
• Redux61,488 Stars

  2 shared tag(s) · 2 shared category(s) · Same language

  make shared-state updates explicit with stores/actions/reducers, while modern code uses Toolkit

  TypeScript
• Signature Pad12,047 Stars

  2 shared tag(s) · 2 shared category(s) · Same language

  draw smooth signatures on HTML5 canvas and export PNG, JPEG, SVG, or point data

  TypeScript
• React Native126,760 Stars

  2 shared tag(s) · 2 shared category(s)

  native mobile UI with React, stable 0.87.1, and a framework-first path

  C++
• Angular101,027 Stars

  2 shared tag(s) · 1 shared category(s) · Same language

  Unify components, signals/DI, routing, forms, SSR/hydration, and CLI tooling in one TypeScript web application platform

  TypeScript
• Playwright96,900 Stars

  2 shared tag(s) · 1 shared category(s) · Same language

  Drive Chromium, Firefox, and WebKit through one API and test runner for E2E, scripting, and agent browser automation

  TypeScript