Design Tokens to Tailwind 4 CSS

Use this skill to turn design token JSON into Tailwind CSS v4 CSS-first configuration. The expected output is CSS containing an @theme { ... } block, usually written to a shared theme file such as src/styles/theme.css.

Tailwind v4 generates utilities from theme variables defined in @theme, so token names and namespaces matter. Favor deterministic conversion over hand-editing whenever the input is a token file.

Default Paths

Use these defaults when the project has the same shape as j70 and the user does not provide different paths:

• Token input: design-tokens.json
• Theme output: src/styles/theme.css
• Frontend entry: src/styles/globals.css
• Payload admin entry: src/styles/payloadStyles.css

For other projects, discover the paths before editing: