lookout.devlookout.dev
search
Share Knowledge
20

Purge Extra Tailwind Classes From Your App

Tuesday, December 1, 2020

When you use Tailwind, you'll get all the styles it has by default. But you're likely not using all those styles. It's best if you only ship the needed CSS to your user, right?

Tailwind makes this easy with the purge array in the tailwind.config.js file. Just put in a list of paths to match for style purging, and webpack will do the rest. The only thing you'll need to remember is that when you run your app's build command, you need to set the NODE_ENV to production. So for an angular app:

NODE_ENV=production ng build --prod my-app

I just enabled this and the styles for my app went from 3.53mb to 10kb. That's .2% of the original size!

Instructions

checkmark-circle
 Do

NODE_ENV=production ng build --prod my-app

Code Examples

tailwind.config.js

purge: [
  './apps/ngneat-dag-demo/src/**/*.html',
  './apps/ngneat-dag-demo/**/*.ts',
  './libs/**/*.html',
  './libs/**/*.ts',
],
Preston Lamb

I'm a JavaScript developer, husband, and father of four from Roy, UT. I've spent the last five years working with Angular on the frontend and Node on the backend. I also write blog posts, create training courses for Thinkster.io, and love learning more about web development. In my free time I like to spend time with my family and play or watch basketball (Go Jazz!).

Meet Preston Lamb

Have a question or comment?