Tailwind CSS Course
Tailwind CSS
/
Intermediate

Unused CSS Removal (Purging)

Definition

The core optimization mechanism of Tailwind that guarantees incredibly small production CSS files by deleting any utility class that is not explicitly found in your source code.

Explain Like I'm New

Tailwind has a 15 Megabyte dictionary of classes. When you run `npm run build`, it reads your HTML like a spell-checker. Any word from the dictionary that you didn't use gets deleted. The final file is usually around 10 Kilobytes.

Real World Example

You import the `@tailwindcss/typography` plugin which generates thousands of classes. Purging ensures that only the exact prose classes you used make it to the live website.

Common Use Cases

  • •Performance optimization
  • •Core web vitals

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • What file do you configure to tell Tailwind exactly which folders to scan for unused classes?

intermediate

  • If your production website has missing styles, but your local `npm run dev` environment looks fine, what is the most likely cause?

Flash Cards

Question

Which config file?

Click to reveal answer
Answer

`tailwind.config.js` (Specifically the `content` array).

Question

Missing production styles?

Click to reveal answer
Answer

A Purge Configuration Error. Your `content` array missed a folder (e.g., you created a new `components/` folder but didn't tell Tailwind to scan it). It purged the classes because it couldn't find them.