How to minify tailwind css in production for performance and obfuscation?

[digibake]

I'm using tailwind for css in a remix app.

Is there a good way to compress the css classes, mainly for performance reasons but also for obfuscation?

Consider a component like this:

<button className="relative inline-flex items-center rounded-md bg-red-600 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
Delete
</button>

is there a way to convert the classNames perhaps something like

<button className="r if ic rm br600 px6 py2 tx ... etc ...">Delete</button>

There are quite a lot of unnecessary bytes over the wire in the className, it seems like there could be a tool out there to reduce some of that?

[brookslybrand]

This is not really a Remix concern and probably more appropriate to reach out to tailwind (existing similar proposal).

You could also explore making a Vite plugin to do this or see if anyone has made anything similar

[digibake]

Ok, thanks.

I just thought I'd ask incase I was missing something obvious or a setting with remix build. I'll have a look into making a plugin but that sounds difficult.