Is there a way to resolve Tailwind class name for config key in Javascript?

[arzatskis]

Sorry if I've missed this in documentation..

I'm working on visual builder that loads Tailwind config and shows available options in interface. To load options from config you can do import resolveConfig from 'tailwindcss/resolveConfig', so all good here. Next step is to know, which class to apply when selecting.

There's manual option - have objects with key / values and get from them, but wondered, maybe this can be automated somehow. Building my own classnames generator seems crazy - Tailwind is already doing this under the hood, but not sure if these methods are exported / available to use.

What I'm looking for is something like resolveClass(theme.borderRadius.sm)? Maybe that's possible with PostCSS and someone could hint me the path doing this?

[simonswiss]

Hey! 👋

That's an excellent idea conceptually, but unfortunately this is not possible at the moment.

Your best bet is to look at the functions generating the classnames in the core plugins and some of the util functions

For certain cases, it might almost be easier to "construct" the classname output with text and value interpolation.

If you pull it off, would love to have a look at your project 🎉

[arzatskis]

@simonswiss thanks for clarification!

For certain cases, it might almost be easier to "construct" the classname

Came to the same conclusion after writing the question (always helps to think out loud 😂). Seems that having a list with class name prefixes ({ width: 'w', backgroundSize: 'bg', //... }) it's quite easy to generate the class name joining prefix with the name of config key.

If you pull it off, would love to have a look at your project

Hopefully we'll have something publicly available by the end of year. If you're interested, you can subscribe for updates on http://ycode.com 😃