How to access design tokens outside of browser?

[selrond]

Docs mention getComputedStyle(document.documentElement) as a way to get values from theme in JS.

However, this is not usable in environments where there’s no document.

For instance, if I want to dynamically document all of our design tokens (autogenerate color swatches, fonts with previews etc.) in storybook, where there’s a build step, how would I go about it using Tailwind 4?

[wongjn]

You could analyze the CSS variables that get output in the CSS.

[selrond]

What do you mean? How would you do that?

[wongjn]

Write some sort of script that opens and scans the CSS file and then interprets the content as some sort of abstract syntax tree. Then, use that information as your design tokens.

[selrond]

This sounds like something Tailwind already does behind the scenes. If there was a way to hook into that, I guess it would be easy to expose the tokens

[maurer2]

Hello, I believe a (albeit hacky) solution would be to create a virtual module in vite (but without the resolveConfig part). Said virtual module would then be used to extract the contents of "@theme {...}" where all the variables are now stored via regex or string manipulation. The extracted string that contains all the variables could then be passed to postcss to get the tokens as json via plugins like https://github.com/alexandrstudio/postcss-export-vars or https://github.com/csstools/postcss-export-custom-variables.

[selrond]

that would probably only work with Vite though right?