[question] Generating all variants of certain classes

[AdrianMrn]

We've got some cases where we're filling the class property of elements using template literals:

<div class={`space-x-${gap}`}>…</div>

I know this technically goes in against what Tailwind tells us to do, but before JIT we could just set our Tailwind config to purge.options.safelist.standard: [/^space-x-/], which left all the relevant classes in our bundled css file even if they were not used in the final bundle. The developer experience this brought us outweighed the couple extra kb we were packing into our css.

With JIT, this doesn't seem possible anymore, as the classes are only added to the css file when they are found in the project. For now, we've worked around this by including a safelist.txt in the purge.content array with this content:

space-x-0
space-x-1
space-x-2
space-x-4
…

We've now ran into an issue where we also need all the sm: and lg: variants of these classes, which would make the file cumbersome to maintain after a while (space-x- isn't the only class we're "whitelisting" in this way). We were wondering if anyone has run into a solution that makes this easier to maintain.

I've considered generating a css file with all the relevant classes using the default tailwindcss postcss plugin and copying that over to the safelist.txt file, but I imagine there must be a more future-proof way to go about this.

[adamwathan]

Yeah this is going to be a hard one to make work I'm afraid — I can't think of a simple way to support regex-based safelisting (although I'm sure there is certainly a not simple way).

I think generating the safelist programmatically is the right idea in general, and any solution we came up with internally would be based on that same principle. You can use the resolveConfig helper to get a fully resolved version of your Tailwind config, loop over all the spacing values, and print the classes you need to a text file, then just regenerate that file any time you make changes to your config. Not super elegant but I think it would solve your issues and maintenance concerns.

[AdrianMrn]

All right, I'll give it a shot! I'll report back in case anyone else runs into the same problem.