How to reduce the file size of Tailwind CSS using PurgeCSS?

#tailwindcss #css #purgecss #tutorial

Tailwind CSS is a popular utility-first CSS framework used by hundreds of thousands of web developers all over the world. The new methodology of working with classes and styles can make building user interfaces easier and faster. In this guide you will learn how to reduce the final size of the Tailwind CSS file by using PurgeCSS and make your website load faster.

By default, the uncompressed file size of Tailwind CSS is 2413.4kB, minified it is 1967.4kB, minified and compressed using Gzip it’s 190.2kB, and when compressed with Brotli it’s 46.2kB. In comparison, the uncompressed file size of Bootstrap CSS is only 143kB. So you might ask, why is it so large? Can I reduce the size of it? The answer is yes, definitely!

Why is the default file size of Tailwind CSS so large?

Tailwind CSS is a collection of utility classes to set certain values of margins, paddings, font sizes, font weights and many more using classes directly. Instead of adding extra padding to a button using a class such as .button, you only need to add the class .p-3 or p-4 and you’ll add padding directly to the element.

The downside is that there are thousands of these utility classes in Tailwind CSS and most of them are not even used in the project and the default size of Tailwind CSS is fairly huge compared to other CSS frameworks. But this does not mean you shouldn’t use Tailwind CSS for your projects, because there is a pretty easy solution to all of this.

How to reduce the file size of Tailwind CSS?

All you need to do to reduce the file size of Tailwind CSS is to remove all of the unused utility classes from the main CSS file. Of course, you shouldn’t do that manually, because there is an awesome tool called PurgeCSS that goes through your HTML templates and decides which CSS classes are used and unused and based on that remove the unused ones from Tailwind CSS.

I assume that you already have a working Tailwind CSS project set up and that you are using the tailwind.config.js file and not only the CDN. If not, check out our latest Tailwind CSS Tutorial where you can learn how to use Tailwind CSS in the recommended way.

Configure PurgeCSS in your Tailwind configuration file to remove unused CSS

All you need to do is provide the paths that PurgeCSS should look for in your tailwind.config.js file by adding the following properties to the purge object:

// tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html'
    ]
}

If you run the build command to process the configuration file you will see that the compiled CSS file of Tailwind CSS will be much smaller than the default size, because the unused classes have been removed.