tokencss/tokencss

Health v2 · maintenance only

Flags: no_license

Adoption not part of the score

1110 stars · 16 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

Token CSS is a PostCSS-based tool that integrates the Design Tokens format into CSS workflows, converting token names in .css and <style> blocks into custom properties. It includes an official Astro integration and a VS Code extension providing IntelliSense and token highlighting.

Use cases

• use design tokens in plain css files
• replace tailwind with token-based css constraints
• integrate design tokens with astro
• get intellisense for design tokens in vscode
• convert token names to css custom properties at build time
• define design tokens in json config

When to choose

• you want tokenized design constraints while keeping plain .css files and <style> blocks
• you build with Astro or already use PostCSS
• you want an interoperable JSON design tokens config

When to avoid

• you need a stable, production-hardened tool - it is a work-in-progress with expected breaking changes
• you prefer runtime CSS-in-JS or utility-class workflows like Tailwind
• you need full compliance with the final Design Tokens spec, since it follows an older draft

Facets

library · maturity experimental

css-framework build-tool ui-components web-development frontend web-design developer-tools editor-plugin design-tokens postcss-plugin astro-integration css vscode-extension tailwind-alternative nodejs web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="tokencss/tokencss")