How to use variables to dynamic change TailwindCSS properties?

Question

I'm building a portfolio and i'm currently stuck in a section where i'm looping thru an object which contains the respective color that I want to use (eg:

export const skills = [
  {
    id: 1,
    name: "front-end",
    Icon: FaReact,
    color: "#61DAFB",
},

In the component mapped receiving these props, I already logged the color variable and it's logging correctly. But when I try to use that variable to dynamic change the color of the component, it doesn't work at all.

const SkillCard = ({ name, Icon, tools, color }) => {
  console.log(`[${color}]`);

  return (
    <article
      className={`bg-black text-gray-300 w-full hover:shadow-lg hover:shadow-gray-800 flex flex-col gap-4 p-8 rounded-lg grayscale hover:grayscale-0 duration-200 border-b-[${color}] `}
    >
      <Icon style={style} size={50} />
      <h1 className="font-bold text-xl capitalize">{name}</h1>
      <p>{tools}</p>
    </article>
  );
};

Here you can see that I'm trying to use the border-bottom property to change depending on the color contained in the array of objects, but I just couldn't find the solution.

I already tried chanching the value of the property, to contain the square brackets, but didn't work as well.

Update January 23:

const SkillCard = ({ skill }) => {
  const { name, Icon, tools, color } = skill;
  const style = { color };

  return (
    <article
      style={{
        borderBottomStyle: "solid",
        borderBottomColor: color,
        borderBottomWidth: "8px",
      }}
      className="bg-black text-gray-400 hover:text-white w-full hover:shadow-lg hover:shadow-gray-800 flex flex-col gap-4 p-8 rounded-lg grayscale hover:grayscale-0 duration-200"
    >
      <Icon style={style} size={50} />
      <h1 className="font-bold text-xl capitalize">{name}</h1>
      <p>{tools}</p>
    </article>
  );
};

Just added that color property as an inline style and now it works as intended. Not shure if it's best practice, but it's what I achieved so far.

John Li · Accepted Answer · 2022-12-26 02:29:39Z

2

It seems that this is because Tailwind need the full class name (complete unbroken strings) to assign the correct style, according to Tailwind document.

Live demo of the example: stackblitz

For example, perhaps try something like:

export const skills = [
  {
    id: 1,
    name: "front-end",
    Icon: FaReact,
    borderBotttomColor: "border-b-[#61DAFB]",
},

Then apply to the component, perhaps also add a bottom border width such as border-b-4:

const SkillCard = ({ name, Icon, tools, borderBotttomColor }) => {
  return (
    <article
      className={`${borderBotttomColor} border-b-4 bg-black text-gray-300 w-full hover:shadow-lg hover:shadow-gray-800 flex flex-col gap-4 p-8 rounded-lg grayscale hover:grayscale-0 duration-200`}
    >
      <Icon style={style} size={50} />
      <h1 className="font-bold text-xl capitalize">{name}</h1>
      <p>{tools}</p>
    </article>
  );
};

Alternatively, dynamic class names could be defined as safelist in Tailwind configuration, although it might not be suitable for this use case.

edited Dec 26, 2022 at 2:29

answered Dec 26, 2022 at 0:58

John Li

7,4973 gold badges7 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matheus Ferreira Over a year ago

Just tried this out, and unfortunately it didn't work as well. Accordind to Tailwind's documentation, it just won't read the class unless it's a complete unbroken string. It can read things like class="{{ error ? 'text-red-600' : 'text-green-600' }}" but won't understand class="text-{{ error ? red : green }}-600", even if these variables refer to the correct atribute

John Li Over a year ago

@MatheusFerreira Thanks for the reply, I added a live demo to the answer and hopefully it could help. I think it could be that the current style does not have a border width set to show the bottom border on hover, but there could be other issues too.

Collectives™ on Stack Overflow

How to use variables to dynamic change TailwindCSS properties?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related