Tailwind custom color is not active on hover

user_13933985 0
Viewed 1910

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.

tailwind-in-js tailwind-css css
3 Answers

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>
user_107901350

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",
      }
    }
  }
}
user_143050760

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.

user_18417100
Related