'Tailwind custom color is not active on hover

I modified my tailwind.config.js to add a new custom color:

module.exports ={
  theme: {
    extend: {
      colors: {
        pepegray: { DEFAULT: "#323232" },
      }
    }
  }
}

Now I want my button to change color on hover.

<button className="h-2 w-2 rounded-full bg-silver hover:bg-pepegray m-0.5"></button>

But it doesn't work.

Funny thing is, if I write bg-pepegray it works. The only place it doesn't work is in the hover.

csstailwind-csstailwind-in-js


Solution 1:[1]

for the pepegray it should be mentioned in ''(quotes) as 'pepegray'. in HTML mentioned it as 'hover:bg-pepegray-DEFAULT'

in tailwind.config.js


module.exports ={
  theme: {
    extend: {
      colors: {
        'pepegray': { DEFAULT: "#323232" },
      }
    }
  }
}

<button className="h-2 w-2 rounded-full bg-silver hover:bg-pepegray-DEFAULT m-0.5"></button>

Solution 2:[2]

If there is no need to add a color pallete, you can remove object as a color value


module.exports ={
  theme: {
    extend: {
      colors: {
        pepegray: "#323232",
      }
    }
  }
}

Solution 3:[3]

I got the same issue in Angular. I restarted the development server and then it seemed to take effect. Other colors seemed to work without restart. Strange.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mayuri Papat
Solution 2 Ihar Aliakseyenka
Solution 3 Eli

Related Questions