Can we add a dynamically created value as a property to a tailwind Class ? Is there a way to properly handle this situation ?

I came across an issue where i was trying to display different labels for different phases of my blog article. The Blog uses Notion as CMS and built with NextJS. The styling is handled my Tailwind which makes styling much convenient.

I parsed all the necessary metadata received from notion in the backend so that i can easily incorporate to the frontend.

To Give you better idea below are the screenshots of what i was trying to accomplish and what the backend data looks like:

fig1: Expected result with background label bg-color

fig:2: backend data: “phaseColor” shows color text.

In this particular instance i was trying to show the phase as a label for each article along with the background color so that it is easier for myself to track the progress. Accessing and showing the phase property was not a problem as it was a direct metadata extracted from Notion and served in the frontend under the div i was trying to show.

However , i also wanted to style the label with different color, which was accessible in the backend. It sounded pretty straight forward to me and i just passed it as a Javascript object in curly braces .

  <div 
  className="absolute bg-${post.phaseColor}-200  px-2 py-1 m-2 rounded-md text-sm font-medium" > 
  {post.phase}
  </div>
  
  //here post.phaseColor is the metadata for color  ( red, yellow or green)

But surprisingly , Tailwind did not understand or care . i did not get the background color i wanted. If i tried displaying the metadata’s text in plain text it was accessible. So this meant, the problem was not data, it lied somewhere else . As it turned out, in how Tailwind CSS works.

After some research i discovered the reasoning.

“Tailwind CSS is a utility-first CSS framework where classes are generated at build time. “

This meant the dynamic class names like what i provided “bg-${post.phaseColor}-200)” won’t work

as they are not determined until runtime.

Since most problems have solutions. This also has a good work around. And that is, to create a mapping of color classes and use this to apply the correct class. Hence i created a following map object to store appropriate colors for my phase labels and passed it to the div’s styling as such:

  const colorClasses = {
    red: 'bg-red-200',
    yellow: 'bg-yellow-200',
    green: 'bg-green-200',
    // add more colors if needed
  };
  // more code .....
  
    <div
    className=
    {`absolute px-2 py-1 m-2 rounded-md text-sm font-medium ${colorClasses[post.phaseColor]}`} >
     {post.phase} 
     </div>

In the code above, colorClasses[post.phaseColor] will return the correct Tailwind CSS class based on the phaseColor property of the post object. This way, you're not creating class names dynamically, but selecting them from a predefined list of options.

Happy Coding !