Dynamic class names (map props to static class names)

[vox91]

Hello,

I have a problem with dynamic class names. I try to dynamically generate a set of styles depending on a color selected by a user in a list.

Depending on the selected color, I apply some styles.

Example : I list 10 blocks of different colors. When a user clicks on one color, I change the background, when he hovers the color, I apply another style.

To this purpose, I have read in the official doc that it is recommended to always use complete class names and to map props to static class names.

Here is what I did :

1- Utility file containing the complete class names :

In utils.js, I have created an object containing a list of colors and styles to apply for each color :

export const colors = {
    red: {
        base : "bg-red-400",
        focus : "focus:ring-red-600",
        selected : "bg-red-600",
        hover : "hover:bg-red-600"
    },
    orange: {
        base : "bg-orange-400",
        focus : "focus:ring-orange-600",
        selected : "bg-orange-600",
        hover : "hover:bg-orange-600"
    },
[...]
}

2- In my component, I import the colors object and apply the different style depending on the color selected by the user :

import { colors } from "@/lib/utils";

<div className="flex flex-wrap items-center justify-center sm:justify-start">
  {Object.keys(colors).map((color) => (
    <RadioGroup.Option
      key={color}
      value={color}
      as={Fragment}
    >
      {({ active, checked }) => (
        <div className={`
         ${active ? 'ring-2 ring-white ring-offset-2 ring-offset-white' : ''}
         ${checked ? colors[color as colorKey].selected : colors[color as colorKey].base}
         ${colors[color as colorKey].focus} ${colors[color as colorKey].hover} flex items-center cursor-pointer justify-center m-2  h-8 w-8 rounded-lg border-gray-300 focus:outline-none`
        }>
          {checked && (
            <div className="shrink-0 text-white">
              <CheckIcon className="h-6 w-6" />
            </div>
          )}
        </div>
      )}
    </RadioGroup.Option>
  ))}
</div>

3- When I test my component, I don't see any style applied (no background color, nothing), but in the DOM, I see that the classnames exist (those from the colors object from the utility class) - but the style is not applied.

Do you have any clue of what wrong is with that ?

Thnaks!

[wongjn]

Consider checking:

• Tailwind has run a compilation since the changes.
• The utils.js file is sufficiently covered by the content file globs in the Tailwind globs.
• The classes in utils.js map to "real" classes that Tailwind can generate.
• Tailwind is set up to compile CSS correctly.

Otherwise, please consider providing a remotely-hosted git repository that reproduces the unexpected behavior.

[vox91]

Hello!
Thanks for your reply.
Finally, the utils.js was not good referenced in the content (Tailwind globs) - this is why the color did not apply. Thanks for this clarification!

[Schulisters]

Code error Direct 2 HR