Tailwind custom color is not active on hover

Question

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.

Are you sure the background color is not changing? Try increasing the width/height of the button. Also double-check the DOM to see if the class is being applied on hover. — juliomalves, Mar 03 '21 at 11:08

score 2 · Accepted Answer · answered Mar 03 '21 at 11:22

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>

score 2 · Answer 2 · answered Mar 04 '21 at 08:01

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

answered Mar 04 '21 at 08:01

Ihar Aliakseyenka

9,587
4
28
38

score 2 · Answer 3 · answered May 02 '22 at 11:45

2

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.

answered May 02 '22 at 11:45

Eli

1,670
1
20
23

Tailwind custom color is not active on hover

3 Answers3