How to use dynamic color classes with Tailwind 3.3.3?

Question

In my project, I have used Tailwind 3.3.3 with Next JS 13.4.

As per project requirement, all the text color and background color i receive from the backend. So in my code I have used tailwind classes like this:

const classList = text-[${blok?.text_color}] font-[${blok?.font_weight}];

As Tailwind removes classes which are not found in code so in my case all the classes were removed and i'm not able to see dynamic colors applied.

I have tried most of the solutions including SafeList in the configuration. But the issue is colors are not predefined, client can use any color.

I guess we can do the same with inline styles but I'm expecting solution with Tailwind which works for any color I receives from Back-end.

Let me know if you need more details.

Answer 1

I had this issue where I needed to set the color of components based on the setup from an API. I found this useful tutorial that helped me a great deal.

Basically though, If you have RGB colors from the backend, then everything is pretty straight forward, you just need to use Javascript to update the css variables. Simply follow what you have in the Tailwind Docs and use Javascript to update your css variable. Tailwind will pick whatever you have defined in the config.

However, if you are like me who needed to use hex color codes from the backend, you need to do some additional stuff, as the official docs didn't cover this.

Steps

1. In your tailwind.config.js color config, set your primary, secondary, etc colors as css variables. Example: primary: withOpacity('--color-primary')

2. Define your withOpacity function to handle Tailwind's opacity manipulation on your colors. This should be at the top of your tailwind.config.js.

   function withOpacity(variableName) {
     return ({ opacityVariable, opacityValue }) => {
       if (opacityValue !== undefined) {
         return `rgba(var(${variableName}), ${opacityValue})`
       }
       if (opacityVariable !== undefined) {
         return `rgba(var(${variableName}), var(${opacityVariable}, 1))`
       }
       return `rgb(var(${variableName}))`
     }
   }
   

3. In your app's Javascript, get your color values and set them as your css vars.

   Here's a snippet:

   Function to convert Hex to RGB:

   Credits: Fbrill

   function getRGBColor (hex) {
     if (!hex) return ''
     let color = hex.replace(/#/g, '')
     // if shorthand notation is passed in
     if (color.length !== 6) {
       color = `${color}${color}`
     }
     // rgb values
     const r = parseInt(color.substr(0, 2), 16)
     const g = parseInt(color.substr(2, 2), 16)
     const b = parseInt(color.substr(4, 2), 16)
   
     return `${r}, ${g}, ${b}`
   }
   

Function to set css variable:

  document.documentElement.style.setProperty('--color-primary', getRGBColor(YOUR_API_PRIMARY_COLOR_HEX_HERE))