Fix Tailwind Background Color Not Applying Dynamically

When using Tailwind CSS, you may run into an issue where dynamically setting a background color using bg-${color} does not work as expected. The class is applied in the inspector but does not render visually.

Why Does This Happen?

Tailwind CSS does not support dynamic class names like bg-${color} because it purges unused styles during the build process. Since these dynamically generated classes are not explicitly written in the code, Tailwind ignores them.

How to Fix It

Here are the best ways to resolve this issue:

1. Use Inline Styles (Best for Unique Colors)

If you want to apply unique colors dynamically, using inline styles is the simplest solution.

const colors = ['#7a5195', '#bc5090', '#ef5675']

export default function App() {
  const names = ['Tyler', 'Charles', 'Vince']

  return (
    <>
      {names.map((name, index) => (
        <div key={name} style={{ backgroundColor: colors[index], padding: '10px', color: 'white' }}>
          {name}
        </div>
      ))}
    </>
  )
}

2. Use Tailwind’s Safelist (Best for Limited Colors)

Modify your tailwind.config.js file to safelist the required background colors.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  safelist: ['bg-purple-500', 'bg-pink-500', 'bg-red-500'],
}

Then, use these class names dynamically:

const colors = ['bg-purple-500', 'bg-pink-500', 'bg-red-500']

export default function App() {
  const names = ['Tyler', 'Charles', 'Vince']

  return (
    <>
      {names.map((name, index) => (
        <div key={name} className={`${colors[index]} p-4 text-white`}>
          {name}
        </div>
      ))}
    </>
  )
}

3. Use Conditional Mapping (Best for Predetermined Colors)

If you have a fixed set of colors, define them in an object and map them.

const colorVariants = {
  green: 'bg-green-500',
  yellow: 'bg-yellow-400',
  blue: 'bg-blue-500',
}

const VisitingCard = ({ colour, title, handle }) => (
  <div className={`h-20 w-40 border ${colorVariants[colour]} p-4 text-white`}>
    <div>Title: {title}</div>
    <div>Handle: {handle}</div>
  </div>
)

export default function App() {
  return <VisitingCard colour="green" title="John Doe" handle="@john_doe" />
}

FAQs

1. Why does bg-${color} not work in Tailwind CSS?

Tailwind’s purge mechanism removes unused styles during build time, and dynamically generated class names are not detected.

2. What is the best way to apply dynamic colors in Tailwind CSS?

• Use inline styles for unique colors.
• Use safelist in tailwind.config.js for predefined colors.
• Use conditional mapping if you have a fixed set of colors.

3. Can I use Tailwind’s JIT mode to fix this issue?

Yes, JIT mode can detect classes dynamically if they are explicitly written somewhere in the project. But if your color names are computed dynamically, JIT mode won’t help.