tailwind css not working between components-CodePudding

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;

CodePudding user response：

It is working with style:

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

CodePudding user response：

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?