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

[Romerolweb]

what might work is:
https://tailwindcss.com/docs/theme#using-a-custom-theme
You may set custome variables:

first approach:

@import "tailwindcss";
@theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
  --color-driftwood: oklch(0.79 0.06 74.59);
  --color-tide: oklch(0.49 0.08 205.88);
  --color-dusk: oklch(0.82 0.15 72.09);
}

Or:

@theme static {
  --color-primary: var(--color-red-500);
  --color-secondary: var(--color-blue-500);
}

the why is

[rozsazoltan]

Related:

• https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names
• https://discord.com/channels/486935104384532500/1389337876667306154/1389347030748500020 (Not long, I'm referring to the entire forum thread under the quote.)

[rozsazoltan]

Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?