Making a tailwind site lighter and faster

Listen to this article

Tailwind is a CSS utility-first framework, that saves you time by building the design of your website while making the HTML itself. It uses pre-fab utility classes that you can use directly in your HTML.

Just use the purge utility

There's a nice feature inside tailwind that let you purge the framework and use only the classes you used in your HTML file, lightening the size of your website.

And it's pretty simple to use it too, you just need to add to the content: [] array (in the tailwind.config.js file) the routes to the files that are using tailwind classes.

// tailwind.config.js file
module.exports = {
   purge: {
      content: ['/routes/*', '/that_use/*', '/tailwind/*'],
   }
}

This way, when you build your site, it'll only 'export' the used tailwind utilities.

Mario Chan Zurita's photo

amazing

Miguel R. Ávila's photo

Cool!