How bad is it to use Tailwind CDN in production?

Question

What are the performance implications of using the Tailwind CSS CDN in production?

Why exactly is this not recommended?

Actiniform

The CDN loads the whole CSS of Tailwind, which is thousands of classes, causing the browser to load a lot of unnecessary information. The recommended way for production involves automatically removing any unnecessary classes. – Experimentalism

Thanks and understood @Jacob. What is Tailwind's new "just-in-time all the time" functionality? How does that improve performance? – Actiniform

Tailwind's JIT functionality automatically removes unnecessary classes from the bundle during development I believe, though I'm not 100% sure on that as I haven't used Tailwind in a while. I'd recommend checking out their website tailwindcss.com – Experimentalism

@Experimentalism is that really true? It seems to me they're building css in runtime. See cdn.tailwindcss.com/3.2.4 My guess is: It's computational heavy. – Sheaff

Answer 1

Tailwind CSS basically "scans" your website's code and creates a built CSS file that only contains the styles for the classes you are using on your website.

In contrast, with the CDN, your are loading the entire library of Tailwind classes and styles. The entire thing is downloaded by your visitors' browsers when they visit your website.

Larger file sizes equals more load time, which may lead to a noticeably compromised user experience, particularly for visitors with slower connections. It also impacts SEO negatively, since the loading speed is an important factor in search engine rankings.

How bad is it?

The chapter on Optimizing for Production in the Tailwind docs states:

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.

Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network.

Compare this with what's stated in the same chapter of the Tailwind v2 documentation:

...the development build of Tailwind CSS is 3645.2kB uncompressed, 294.2kB minified and compressed with Gzip...

So we're looking at around 300kB vs less than 10kB – a 30x difference.

Finally, I might also add, using Tailwind from the CDN, you might not get useful features like syntax completion etc. in your code editor, which makes a big difference in the dev experience.

Pohl

> using Tailwind from the CDN, you might not get useful features like syntax completion. One way to bypass this constraint is to create a tailwind.config.js file so that your editor can see that you are using tailwind. This way you will get autocompletion. – Ducat

relative to 10kB, 300kB seems like a lot, but in reality 300kB is a really small file size. Even a single logo image can be 300kB. Plus the user's browser caches the static content. – Congratulant

....that's it? I've been pulling my hair out for hours trying to install Tailwind on Windows server 2008 to avoid 290kb per page....? CDN it is.... – Esthonia