Question 73906 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Tailwind colors in brackets not working dynamically – Reactjs

I recently ran into an issue that my custom colors are not working whenever I make them dynamically. I will provide 2 codes and 2 screenshots, one with the dynamical code, one with the dynamical output, one with the static code and one with the static output.

I refuse to acutally program them statically because I get that information from a seperate file that can change easily so it’s easier for me to add one instead of creating a whole new divset.

Dynamic:

<div className='w-full bg-bgWhite'>
        <div className='w-1/2 grid grid-rows-3 gap-10 grid-cols-3'>
          {skills.map((skill, index) => (
            <div className={`p-5`}>
              {createElement(skill.icon.type, {
                className: `w-20 h-20`,
              })}
              <p className={`text-[${skill.color}]`}>{skill.color}</p>
            </div>
          ))}
        </div>
      </div>

Dynamic output:
enter image description here

Static:

<div className='w-full bg-bgWhite'>
        <div className='w-1/2 grid grid-rows-3 gap-10 grid-cols-3'>
          {skills.map((skill, index) => (
            <div className={`p-5`}>
              {createElement(skill.icon.type, {
                className: `w-20 h-20`,
              })}
              <p className={`text-[#3FB27F]`}>{skill.color}</p>
            </div>
          ))}
        </div>
      </div>

Static output:
enter image description here

QUICK SIDENOTE
Whenever I reset the code back to the dynamical form after executing the static form I get this solution:
enter image description here

This is gone after restarting the project.

Help is very much appreciated! 🙂

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently postcss makes this impossible, the only solution is adding them in tailwind config


  2. 0

    I think you need to active just-in-time mode.

    tailwind.config.js

    module.exports = {
  mode: 'jit',
  // ...
}

    with safelisting classes

    module.exports = {
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
  // ...
}
    Login or Signup to reply.
  3. 0

    Because Tailwind class names should be extracted at build-time, you cannot use string concatenation for generating a class name with a dynamic arbitrary.

    So text-[${skill.color}] won’t work.

    You can change color property’s value as text-[#3FB27F] in your object then it will work.

    const skills = [
  {
    text: "JS",
    color: "text-[#3FB27F]",
  },
  {
    text: "C#",
    color: "text-[#6A1577]",
  },
  {
    text: "React",
    color: "text-[#61DBFB]",
  },
  {
    text: "MySQL",
    color: "text-[#00618B]",
  },
 // ...
];

{skills.map((skill, index) => (
  <div className={`p-5`}>
    {createElement(skill.icon.type, {
      className: `w-20 h-20`,
    })}
    <p className={skill.color}>{skill.color}</p>
  </div>
))}

    Or you can create a new array with map to then loop with another map without touching your original color value in DB or wherever you get that:

    skills
  .map((skill) => ({ ...skill, colorClass: `text-[${skill.color}]` }))
  .map((skill, index) => (
    <div key={index} className={`p-5`}>
      {createElement(skill.icon.type, {
        className: `w-20 h-20`,
      })}
      <p className={skill.colorClass}>{skill.color}</p>
    </div>
  ));

    Suggestion: I didn’t see key attribute in your loop. So don’t forget to add it. If possible, don’t use index.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search