Variables as a color?

Question

I know that tailwind default, not support variable as parameter CSS like color etc. Are there any hacks on the market for this?

My code:

code in .tsx file:

  <Disclosure.Button className={`${error}`}>

tailwind.config:

  error: "#cf222e",

Answer 1

You can do like this:

First define the color in tailwind.config.js file like this:

module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
      'error':{
       100:'#cf222e',
       200:'#cf222e',
       300:'#cf222e',
       .
       .
       900:'#cf222e',
    }
  }
}

First you can use this color in the .tsx file directly.

<Disclosure.Button className="text-error-100">

Second You can define as variable like this

const errorColor = `text-error-100 bg-error-300`

and then use it like this

<Disclosure.Button className={`${errorColor}`}>

Third you can also add some condition like this

function change_error_color(res) {
  if(res === "small_error") return `text-error-100`
  else if(res === "large_error") return `text-error-900`
}

And use it like

<Disclosure.Button className={`${change_error_color(res)}`}>

Answer 2

At the moment my fast hack:

const DisclureCustom = ({ title, color = "metal", children }: Props) => {
  const switchColor = ` text-${color} bg-${color}/60 hover:bg-${color}/25 focus-visible:ring-${color}`;

  return (
    <Disclosure>
      {({ open }) => (
        <div className="pt-2">
          <Disclosure.Button
            className={
              switchColor +
              `flex justify-start w-full px-4 py-2  rounded-lg  focus:outline-none focus-visible:ring  focus-visible:ring-opacity-75`
            }
          > ...
    </Disclosure>
  );
};

export default DisclureCustom;