Unable to purge unused classes in Tailwind CSS after upgrading to version 4.1.1-rc.1

[didoin]

Starting from version 4.1.1-rc.1, with the move from pass-through attributes to the use of preprocessors, it is no longer possible to properly purge unused classes via Tailwindcss in Vite.

This change is due to the fact that Tailwind CSS searches for classes used within the class attributes of the various components.

Currently, however, you declare classes using the cx() helper, which prevents Tailwind CSS from identifying which classes are actually used.

Is there a workaround to fix this problem?

In previous versions, with styles defined in pass-through, classes were identified correctly.

[didoin]

Honestly, I struggle to see the benefits of switching to using preprocessors.

DISADVANTAGES:

• They generate excessively large CSS files.
• You don’t just use TailwindCSS classes; you end up creating new ones.
• In dev mode under Vite, every time a component is modified, regenerating the CSS takes around 6 seconds on my machine.
• TailwindCSS's purge no longer works as expected.
• The flexibility in customizing styles is lower compared to using direct pass-through.

[cagataycivici]

The new approach does not support auto purge unfortunately as TW cannot know which class is used.

For now you need to manually choose which components you want from the set like commenting out the import line or removing the file.

Pass through still can be used, both are still supported, update is not mandatory, we'll just maintain this version.

In my computed, it takes less than a second to see the change.

From our side advantages > disadvantages, mainly the maintenance work. As I've mentioned, you can choose the one you prefer. PrimeVue is not a Tailwind CSS component library, but it can be styled with Tailwind CSS.

[didoin]

Thanks for your reply. So the presets will no longer be updated?

[johannes-at-w]

@cagataycivici could you share what will happen with the Tailwind CSS Presets? I see they're still on the roadmap.