Tailwind custom color is not active on hover

1
votes

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.

2
csstailwind-csstailwind-in-js
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

2 Answers

1
votes

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>
1
votes

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