Safe List ot a ready component

[roycw]

Howdy, using V4 im trying to create a compeoent to show all the taiwlind colors for choosing from a dropdown. i got everything working but i think i have t safe list all the colors , because they are purged and the comp uses string maipulation to show all colors... do i need to safe list, if so.. how ? is there a ready made hack to do that ?

Thansk!

[wongjn]

You could consider using @source inline() with brace expansion patterns.

[YakshTechs]

Hey! 👋 You're absolutely right — when you're using Tailwind CSS (especially with v3+ and v4), any class names that are dynamically generated via string manipulation (like bg-${color}-500) will be purged by default unless they're explicitly safelisted. Tailwind's Just-in-Time engine can’t predict dynamic strings unless they're written out fully in the code or safelisted.

🔥 Why this happens

Tailwind's JIT engine scans your code for actual class names. So if you're dynamically constructing class strings at runtime (like inside a dropdown or loop), Tailwind has no way of knowing which variants to keep during build time — and it throws them out to keep the CSS lean.

---

✅ Solution: Safelist the Colors

You do need to safelist them, unless you hardcode every class.

Here’s how to do it:

1. Open your tailwind.config.js and use the safelist option:

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'], // adjust based on your project
  safelist: [
    {
      pattern: /bg-(red|blue|green|yellow|indigo|purple|pink|gray|slate|teal|cyan|lime|amber|orange|rose)-(100|200|300|400|500|600|700|800|900)/,
    },
  ],
}

This will keep all the background classes you might need like bg-red-500, bg-blue-300, etc.

2. Optional: If you're using multiple utilities (like text-, border-, hover:bg-, etc.), update your regex:

safelist: [
  {
    pattern: /(bg|text|border|hover:bg)-(red|blue|green|yellow|indigo|purple|pink|gray|slate|teal|cyan|lime|amber|orange|rose)-(100|200|300|400|500|600|700|800|900)/,
  },
]

---

💡 Pro Hack: Use a Script to Generate All Classes

If your color list is huge or you want full control, you can generate safelist entries like this:

// generateSafelist.js
const fs = require('fs')
const colors = [
  'red', 'blue', 'green', 'yellow', 'indigo', 'purple', 'pink',
  'gray', 'slate', 'teal', 'cyan', 'lime', 'amber', 'orange', 'rose'
]
const shades = ['100','200','300','400','500','600','700','800','900']

let safelist = []

colors.forEach(color => {
  shades.forEach(shade => {
    safelist.push(`bg-${color}-${shade}`)
  })
})

fs.writeFileSync('./safelist.json', JSON.stringify(safelist, null, 2))

Then you can import that into your tailwind.config.js like:

const safelist = require('./safelist.json')

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  safelist,
}