tailwind css not working between components

Question

So I have created a button component where i have passed props for how the btn will look. But when i try to use the props the props dont work. I dont think this is a problem with my code because if you use the colors manually first in the btn file, compile it, then use them as a prop it works only for that color

src/Button.js

import React from "react";

function Button({ text, img, textColor, bg, hoverBg }) {
  console.log(hoverBg);
  return (
    <button
      className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
    >
      <img src={img} alt="button-img" className="h-6" />
      <h1 className={`font-bold text-${textColor}`}>{text}</h1>
    </button>
  );
}

export default Button;

src/pages/Register.page.js (The page where im using the button comp)

import React from "react";

function Button({ text, img, textColor, bg, hoverBg }) {
  console.log(hoverBg);
  return (
    <button
      className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
    >
      <img src={img} alt="button-img" className="h-6" />
      <h1 className={`font-bold text-${textColor}`}>{text}</h1>
    </button>
  );
}

export default Button;

You cannot use dynamic class names in tailwind tailwindcss.com/docs/content-configuration#dynamic-class-names — charchit
– charchit, Commented May 31, 2022 at 4:42

MagnusEffect · Accepted Answer · 2022-05-31 07:43:03Z

3

TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class… text-${textColor} as a string.

…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.

You have to return the complete string instead of only color from the props. Like in your props if textColor is returning red-600 then you have to make it to return the string like text-red-600.

Further you can see my answer here How to dynamically populate tailwindcss grid-cols-x property?

answered May 31, 2022 at 7:43

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

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

Comments

Phan Thành Công · Accepted Answer · 2022-05-31 05:20:23Z

0

It is working with style:

<div style={{ backgroundImage: classBackgroundImage}}>
      </div>

answered May 31, 2022 at 5:20

Phan Thành Công

312 bronze badges

Collectives™ on Stack Overflow

tailwind css not working between components

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related