Tailwind CSS Colors Not Applying Dynamically

[krishp4telll]

Hey everyone,

I’m new to Tailwind CSS and was trying to dynamically apply text colors using a variable. Here’s the code I wrote:

export default function Home() {  
  const color = "blue";  

  return (  
    <div>  
      <p className={`text-${color}-600`}>This is a test</p>  
    </div>  
  );  
}

The text renders, but the color doesn’t apply. I double-checked my setup and can’t figure out why it’s not working. What am I doing wrong?

Thanks for the help!

[eric-mxrtin]

Tailwind’s default setup doesn’t recognize dynamic class names like text-${color}-600 because it relies on class detection during build. To fix this, you can safeguard all potential colors by explicitly defining them in your code or in your tailwind.config.js file.

[krishp4telll]

got it, thanks