Dynamic variables

[aleczratiu]

Are there any approaches by having the classes dynamic?

An example case where this could be applied: The server can return a predefined list of Color classes like red-50 lime-100 (using a CMS or something) but one at a time, adding directly as a dynamic variable on the element is not reflecting the changes in page, in dom I can notice the class has been added but not the style, any thoughts or approaches?

Thank you.

[dcastil]

Hey @aleczratiu! 👋

I'm not sure if I understand what you mean. What do you mean with a dynamic variable? Do you maybe have a code example?

PS: Thanks for your patience, I'm just coming back from a vacation.

[aleczratiu]

Hello @dcastil , I'm currently using Sanity as a CMS, and I want to enable users to pass colors, such as red-50, red-100, red-200, etc., from the CMS to be applied as background colors in a Next.js project. Here's my question: If I select a color from the CMS, for example, "red-50," and I want it to be rendered as a background color in Next.js using Tailwind CSS, I use a variable like bg-${color}. The "color" in this case could be any of the colors from the palette, like "red-50," "red-100," or "red-200." The desired result would be bg-red-50. However, I'm encountering an issue where the color is not being applied. While I can see that the class has been applied in the DOM elements, the color itself is not rendering correctly.

Thank you for your time!

[dcastil]

Ahh got it. I think this is an issue with Tailwind CSS and not tailwind-merge. It isn't possible to add color classes dynamically like this because Tailwind scans the codebase for classes that are being used. You can read about that here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names