Is there a recommended approach to define theme programmatically?

[catnipan]

Our project has a core design system library that defines tokens like:

const paletteTokens = {
   'palette-1': 'blue',
   'palette-2': 'red',
   'palette-3': 'green',
   // ...
};

This setup allows us to use these tokens beyond just Tailwind projects while maintaining a single source of truth.

Tailwind v3 Approach

In Tailwind v3, we could easily import this library and integrate it into tailwind.config.js like this:

module.exports = {
	theme: {
		colors: {
			...paletteTokens
		}
	}
};

Tailwind v4 Changes

In Tailwind v4, the recommended approach is to define colors using CSS variables:

@theme {
    --color-palette-1: blue;
    --color-palette-2: red;
    --color-palette-3: green;
    /* ... */
}

However, since we can’t directly import JavaScript into CSS, I’m looking for an easy way to automate or streamline this conversion in Tailwind v4.

Any recommendations?

[universse]

some ideas:

• write a script to convert design tokens to a css file and import it
• use @config directive for v3 config

[andymerskin]

Would the @config directive be just as performant as v4's CSS variable/theme approach? I have a similar need, and would like to stay away from using the legacy configuration in case it's no longer supported later.

[jakubmazanec]

+1. I was generating theme palette too (https://github.com/jakubmazanec/tools/blob/development/packages/ui/source/development/createTailwindConfig.ts) and before upgrading to Tailwind v4, I would like to know if @config directive will be supported also in the next versions of Tailwind.