@teacss/vite

The Vite plugin for TeaCSS. It runs the Rust engine (@teacss/engine) in process and generates the CSS for the class tokens your project uses. It needs Node.js 26 or later and Vite 7 or later.

Install

npm install --save-dev @teacss/vite vite

Use

// vite.config.ts
import { teacss } from "@teacss/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [teacss()] });

Configuration lives in a CSS entry. Create index.css at the project root:

@presets "standard,icons,official";
@source "./src/**/*.{js,jsx,ts,tsx,html}";
@teacss;

Import the generated CSS once from the application entry:

// src/main.ts
import "virtual:teacss.css";

The dev server also serves the inspector at /__teacss; pass inspector: false to turn it off. In dev, the dev server serves the Standard preset's fonts under <base>__teacss_fonts/, prefixed with server.origin when it is set. The generated CSS writes these URLs as URL(, as teacss-ts does: CSS function names are case-insensitive, and Vite skips PostCSS for a stylesheet with no lowercase url(. A build emits the fonts as assets.

Other plugins reach the project through the api of the plugin named teacss:api (TeacssVitePluginApi): getProject() returns it, and invalidate() updates the generated CSS on the dev client after a module was registered through getProject().transform().

Documentation

• Setup and the CSS entry
• Plugin options and Lightning CSS
• The TeaCSS skill for syntax, presets and tooling