CODEWITHSUNDEEP
cssreactjstailwind-css
Matheus Ferreira
Matheus Ferreira

Reputation: 31

How to use variables to dynamic change TailwindCSS properties?

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.

Upvotes: 3

Views: 3106

Answers (1)

John Li
John Li

Reputation: 7447

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.

Upvotes: 2

Related Questions