Question 295876 in Javascript Question posted in
A very good W3school tutorial can be found here.

Why is adding style to an element through a javascript variable in tailwind not applied to the element?

Focus on these two buttons "SHOP NOW" and "LATEST COLLECTION", I added a background color to the first button with a javascript variable on the other hand second button’s background color was added as usual we do in taiwlind. As we can see in inspect section, both buttons have background colors but the background color of the first button has not been applied yet.

Here is the source code

const Category = () => {

      const bgColor = "#FFE6D9";

  return (
    <div className="flex flex-col gap-12 justify-center items-center mt-12 ">
      <button className={`bg-[${bgColor}]`}>SHOP NOW</button>
      <button className={`bg-[#FFD6D9]`}>LATEST COLLECTION</button>
    </div>
  );
}


export default Category
Tags:

2

Answers


  1. 0

    try removing the square brackets, it should works.

    Login or Signup to reply.
  2. 0

    Styling with the bgColor variable doesn’t work because Tailwind needs to be aware of all its classes before compiling. However, your other class, bg-[#FFD6D9], is what Tailwind calls an arbitrary class and works as expected.

    You can accomplish what you’re trying to achieve with CSS custom properties:

    const bgColor = '#FFE6D9'

const YourButton = () => {
  return (
    <button
      style={{ '--button-color': `${bgColor}` } as React.CSSProperties}
      className="bg-[--button-color]"
    >
      Shop now
    </button>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search