Tailwind CSS
/Advanced
Content Configuration (Safelist)
Definition
Advanced configuration rules ensuring Tailwind scans all necessary files, and 'Safelisting' specific classes that you force Tailwind to keep even if it can't find them in the code.
Explain Like I'm New
Sometimes you receive data from a database that says `color: 'red'`. You use JavaScript to construct `bg-${color}-500`. Tailwind will delete this class because it didn't see the full word `bg-red-500`. You must 'Safelist' `bg-red-500` in the config to tell Tailwind: 'I swear I need this, do not delete it!'
Real World Example
A CMS where admins can choose button colors from a dashboard. The developer must Safelist all possible button color classes in the frontend codebase.
Common Use Cases
- •Dynamic styling
- •CMS integrations
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- What array in `tailwind.config.js` is used to prevent specific classes from being deleted by the compiler?
intermediate
- Can you Safelist an entire pattern using Regular Expressions?