@teacss/postcss

The PostCSS plugin for TeaCSS. In the stylesheet whose top level holds @teacss;, it calls the Rust engine (@teacss/engine) in process and replaces that rule with the generated CSS. It needs Node.js 26 or later and PostCSS 8.

Install

npm install --save-dev @teacss/postcss postcss postcss-cli

postcss-cli is only for the example below; any PostCSS runner works.

Use

// postcss.config.mjs
import teacss from "@teacss/postcss";

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

Configuration lives in the CSS entry. Create index.css:

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

Process the entry and link the output from your pages:

npx postcss index.css -o dist/app.css

The Standard fonts go to teacss-fonts/ beside the output file (dist/teacss-fonts/ here), and the stylesheet links them with relative URLs. Vite and webpack's postcss-loader pass the entry itself as the output file, so the fonts land in teacss-fonts/ beside the entry and the bundler emits them as assets; you may want Git to ignore that directory. Without an output file (PostCSS's to option), the fonts stay inline as data: URLs.

teacss is both the default and a named export.

Documentation

• Build integrations and their options
• The CSS entry
• The TeaCSS skill for syntax, presets and tooling