CODEWITHSUNDEEP
csstailwind-csstailwind-in-js
Arnold Gee
Arnold Gee

Reputation: 906

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.

Upvotes: 4

Views: 5898

Answers (3)

Eli
Eli

Reputation: 1846

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.

Upvotes: 1

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14183

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

Upvotes: 2

Mayuri Papat
Mayuri Papat

Reputation: 61

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>

Upvotes: 2

Related Questions