Get a dynamic variable with hex code to Tailwindcss with next [duplicate]

Question

My Task is that I will get a hex code from database and depending on the hex code, colors should change.

variables.js

const primaryColor = "#000000";
const secondaryColor = "#ff0000";
const notCheckedColor = "#9CA3AF";

export { primaryColor, secondaryColor, notCheckedColor };

This is an example of code

<section className={`bg-white py-12 mt-12  text-${secondaryColor}  sm:py-16 lg:py-20`}>

Problem is the color didn't show.

Inspect output

Thanks as well

I tried to add it statically and it works but when I use bg-${secondaryColor} code, it doesn't work.

I expect that hex code return the color to the element.

Wongjn · Accepted Answer · 2024-01-24 20:25:24Z

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You could:

Use complete class definitions, like:

const primaryColor = "#000000";
const secondaryColor = "text-[#ff0000]";
const notCheckedColor = "#9CA3AF";

export { primaryColor, secondaryColor, notCheckedColor };

<section className={`… ${secondaryColor} …`}>

Use the style attribute:

<section className="…" style={{ color: secondaryColor }}>

Collectives™ on Stack Overflow

Get a dynamic variable with hex code to Tailwindcss with next [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related