Programmatically find unused TailwindCSS tokens

[maximilianschmitt]

Is there a way to find unused Tailwind tokens? Kind of what Knip does for JavaScript/TypeScript?

E.g. if I have a custom color defined in Tailwind, I'd like to know if it's used anywhere or not. Does something like that exist?

If not, how could we build something like that? Maybe as a Tailwind plugin?

[Inventoris]

Hi @maximilianschmitt!

I don't think such a tool exists.

For automatically removing unused classes, a tool like PurgeCSS can be useful. However, it does not help in detecting unused tokens (like custom colors in tailwind.config.js). It only removes unused classes from the final CSS output. To actually find unused tokens, we most likely need to make a plugin, as you said.

I hope I answered your question!

[maximilianschmitt]

That's what I suspected. I think this kind of a plugin would be really useful, especially in large projects where there might be some legacy tokens around that aren't used anymore