Separate tailwind.css for each page

[baloo1687]

Hi everyone.

I am using tailwind on my project.
While optimizing pages, I came across such a thing:
Due to the large number of classes on all pages, my minimized file (uncompressed) weighs about 300kb.

As I realized, it's because tailwind includes absolutely all classes from the whole project....

Is there any way to make the final file contain only those classes that are used on a particular page (for example, if I have 2 pages, home.html, about-us.html, and I use the "w-full" class on the about-us.html page, and I don't use it on home.html, then I don't add the "w-full" class to the final style file for home.html?

It's just that if I now get a file size of 300kb (compressed about 25-27kb), and I don't use tailwind on all pages yet, there will come a time when one style file will weigh about 100kb, which sounds absolutely crazy especially for mobile users!

Any hints would be appreciated.

P.S. I'm also interested in whether it's possible to create a style file exclusively with media expressions (for tablet and mobile).

[alex-krasikau]

Hey @baloo1687!

I understand what you're asking about, and no, Tailwind CSS doesn't support such a thing.

But, from a performance perspective, I would still suggest you follow the default approach of having a single CSS file for the whole project for a couple of reasons:

1. Tailwind CSS grows fast initially but quickly slows down as you keep using the same classes over new pages. So, I wouldn't expect it to grow too much once you've done the first few pages.

2. Browsers use Gzip and Brotli algorithms that are really good at compressing repetitive strings, which is the core idea of Tailwind. The larger your CSS file gets, the better the compression rate. As Harry Roberts shows in his article, one large bundle almost always wins over a larger number of small chunks.

3. Once your user has loaded the first bundle, they will have a smooth experience navigating through the website. Otherwise, they will have to load a new CSS file when they land on a new page.

Please let me know if you have any other questions.

[baloo1687]

Thanks, that's an interesting observation!
But what if we're talking about Core Web Vitals?

At the moment, my main goal is to optimize the whole site and improve all Core Web Vitals scores to the green zone.

And at the moment I already have about 30kb of compressed style file, for mobile devices it's too much, because according to performance indicators (with fast 3g setting), the file is downloaded in 1.6-2 seconds, and LCP does not fall below 2.6-3 seconds...

[dralletje]

Tailwind v4 supports this!

Tailwind v4's css configuration makes it so you can import multiple configuration files, and every "config" file will generate it's own output css.

@import 'tailwindcss' source(none);
@source "./";

This will create a tailwind file that only includes the classes it parses from the directory this file is in.
You can even have @theme for that specific file, or @import a file with a shared theme.

Editor intelliSense does suffer though, but only for custom utilities and themes that are not defined in the "main" app.css (curious how it determines this main file though).