Optimising CSS when using Tailwind

[jabranr]

Hi folks,

I am looking to see how people are tackling the tailwind bundle for different routes.

Most of the content on the web is about setting up Tailwind with Remix and it just bundles everything into one file. I am interested in breaking it down to route levels so each route can leverage the Remix links export with only the CSS it needs in addition to basic/global from the root.

Thanks

[kiliman]

I don't think splitting up the Tailwind CSS file is worth the effort. The benefit of Tailwind is that the vast majority of the classes will be shared across routes. Even big sites tend to approach a limit of around 10KB before gzip.

[jabranr]

Thanks, I can see how silly was the thought behind it. I think I was thinking more at the Remix links export than the benefits of bundled utility-driven CSS.

[jkomyno]

I think you can just add cssnano in your postcss.config.js file, as explained in https://tailwindcss.com/docs/optimizing-for-production.