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?

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.