Convert design tokens to a Tailwind v4 config
Views
1.1K
Copies
280
Likes
145
Comments
0
Copy rate
25.0%
Prompt
Write a Node.js CLI that reads a [token_format] design token file and outputs a ready-to-use Tailwind v4 CSS file with @theme directives.
Input file: [input_path]
Requirements:
- Support color tokens (with nested scales), spacing, font sizes, border radius, shadows
- Resolve token aliases (tokens that reference other tokens)
- Convert camelCase or dot.notation to kebab-case CSS variable names with a configurable prefix
- Preserve comments as CSS comments
- Emit a single tailwind.css file with :root and .dark blocks
- Include a --help flag and reasonable error messages when the input is malformed
- Be fully typed (TypeScript, strict)
No external dependencies beyond node:fs/promises and commander (or yargs).Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Write a Node.js CLI that reads a [token_format] design token file and outputs a ready-to-use Tailwind v4 CSS file with @theme directives.
Input file: [input_path]
Requirements:
- Support color tokens (with nested scales), spacing, font sizes, border radius, shadows
- Resolve token aliases (tokens that reference other tokens)
- Convert camelCase or dot.notation to kebab-case CSS variable names with a configurable prefix
- Preserve comments as CSS comments
- Emit a single tailwind.css file with :root and .dark blocks
- Include a --help flag and reasonable error messages when the input is malformed
- Be fully typed (TypeScript, strict)
No external dependencies beyond node:fs/promises and commander (or yargs).
Example output