api to target selectors

[FilipePfluck]

I suggest a way to apply certain classes to certain selectors. What I mean is adding an object configuration (both for the default classes and for the variants) that looks like this:
{
before:
content-[''] w-1 h-6 rounded-full absolute left-0 bg-gradient-to-b from-green-50 to-purple-50
}

and it would under the hood return this:
before:content-[''] before:w-1 before:h-6 before:rounded-full before:absolute before:left-0 before:bg-gradient-to-b before:from-green-50 before:to-purple-50
the same concept could be applied to hover, focus, etc...

[joe-bell]

Tailwind’s JIT engine relies on statically analysed strings, so unfortunately this is not possible

[FilipePfluck]

Hew @joe-bell may I ask you to elaborate a bit further into this? I would like to understand how does the JIT engine works and why this does not work. In fact, I tried to create some functions to try to workaround this and I confirmed that it in fact does not work.

For example I tried creating a hover function that receives a string containing classnames, split it on whitespaces, attach hover: to the beggining of each and then join them again. And this generate a completely valid tailwind class, so I don't get why this don't work. Also, unless I'm understanding this very badly, my function is only being called at build time and not on run time (I'm calling it on a separate .ts file and not inside a React component), so when the JIT engine runs it should already be a static string, no?

Also, do you know any way that I can avoid keep writing hover: again and again?

Thanks for your time, appreciate very much your project