Tailwind performance issues

[aivenkimmob]

This is not an actionable issue / bug as is, but discussions wasn't enabled for this repo. The actual question is: what strategies are there to optimise either the TS compile time, or the amount of class names? We're using Tailwind, which results to around 40k classnames available dev time.

One option that I was thinking is that if this plugin would be ran after the Tailwind CSS has been purged, then it would only output the types that are used in the code. I'm not sure if that is practical, since the workflow is:

• Add class name to your component e.g. bg-newcolor-100

• This should trigger a rebuild for PostCSS

  1. Tailwind full CSS is built (containing 40k classnames)

  2. CSS is purged, so that only the ones referred from code are left (let's say e.g. 1k classnames left)

  3. postcss-ts-classnames plugin generates the reduced typing file with only 1k classnames.

     At this stage, the new | 'bg-newcolor-100' is added to auto generated types

• Only after doing all that, VS Code (or another editor), starts the re-evaluation of type errors and should clear out the red error highlighting from the component's bg-newcolor-100 code.

Any additional ideas or hints for optimisation? Thanks.

[esamattis]

I'm afraid there's no easy solutions.

One option that I was thinking is that if this plugin would be ran after the Tailwind CSS has been purged

This is what I came up as well but it kinda defeats the purpose because during development you want all the class names to be available since purging is just a compiler optimization...

But to generate only the purged class names I think you can just move the postcss-ts-classnames plugin after the purge plugin. I haven't tried it tho.

My sad conclusion is that the tailwind vscode plugin is better for the development. That being said you could run this in a CI for example: In develoment just use type ClassNames = string but in a CI build it to be the full union and run tsc after that to get proper type validation.

[kimmobrunfeldt]

Thanks for the input. We ended up in a solution that purges the classnames before generating types. Even though the iteration slow is a bit slower, tsc is much faster with the ~1000 types vs ~40k.

[esamattis]

Nice. Was it just a matter of ordering the plugins or something more complicated?

[aivenkimmob]

It was really simple in the end, just add a purge option to tailwind.config.js and tailwind plugin automatically purges the css. Additional benefit with that is that the typechecks also make sure that purge doesn't remove too much (e.g. dynamically created classname strings)