Tailwind CSS
/Intermediate
Content Scanning (Purging)
Definition
The process where Tailwind's Just-In-Time (JIT) compiler scans your source files to detect class names, ensuring only the CSS you actually use is included in the final bundle.
Explain Like I'm New
Tailwind has over 50,000 possible classes. If it shipped all of them to the browser, the file would be 15 Megabytes. Instead, Tailwind literally reads your `.html` and `.jsx` files like a book. If it sees the word `text-red-500`, it generates the CSS for it. If it doesn't see it, it skips it.
Real World Example
Deploying an app and realizing all your dynamically generated colors (like `bg-${color}-500`) are missing because Tailwind couldn't find the complete class name during the scan.
Common Use Cases
- •Production optimization
- •Debugging missing styles
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- If you use a Tailwind class in your HTML, but forget to add that HTML file to the `content` array in `tailwind.config.js`, what happens?
intermediate
- Why does `<div class={`bg-${color}-500`}>` fail to work in Tailwind?