CODEWITHSUNDEEP
reactjstailwind-cssvite
Ole Dybedokken
Ole Dybedokken

Reputation: 413

Tailwind change background color using :hover in style

Problem is that hover effect doesnt make a difference. I have added a hover: effect to the style like I normally do in React, but when using tailwind it dosent do a difference. How can I change the background color on hover in this?

<div class={`z-50 h-full rounded-4 px-2 center gap-1.5 xl:gap-2 cursor-pointer transition-all flex flex-row items-center`}
                                style={{
                                    background: 'linear-gradient(0deg, rgba(255, 75, 75, 0.2), rgba(255, 75, 75, 0.2)), rgba(41, 40, 56, 0.75)',
                                    "backdrop-filter": 'blur(12.5px)',
                                    ":hover": { background: "#FF4B4B" }
                                }}>
</div>

Upvotes: 0

Views: 2205

Answers (2)

MagnusEffect
MagnusEffect

Reputation: 3925

You can write the styles mentioned in the `{{style}} tag in tailwind css like this

I have first converted the RGBA value to HEX like below

rgba(255, 75, 75, 0.2) :  #ff4b4b33
rgba(41, 40, 56, 0.75) :  #292838bf

Now converting you classes into tailwind classes

linear gradient

linear-gradient(0deg, .. , .. , ..)                  : bg-gradient-to-r
linear-gradient(..,rgba(255, 75, 75, 0.2) , .. , ..) : from-[#ff4b4b33]
linear-gradient(.., .. , rgba(255, 75, 75, 0.2), ..) : via-[#ff4b4b33]
linear-gradient(.., .. , .. ,rgba(41, 40, 56, 0.75)) : to-[#292838bf]

background hover

:hover: { background: "#FF4B4B" } => hover:bg-[#ff4b4b]

backdrop filter blur

backdrop-filter: 'blur(12.5px)' => backdrop-blur-[12.5px]

You can also use backdrop-blur-md as it simply means backdrop-filter: blur(12px);

Note - The [] bracket are use to give the arbitrary value that does not include in tailwind theme

Hence your complete code can be written in the following way

<script src="https://cdn.tailwindcss.com"></script>
<div class="rounded-4 center z-50 flex h-full cursor-pointer flex-row items-center gap-1.5 bg-gradient-to-r from-[#ff4b4b33] via-[#ff4b4b33] to-[#292838bf] px-2 backdrop-blur-[12.5px] transition-all hover:bg-[#FF4B4B] xl:gap-2">Hello from MagnusEffect !</div>

Also you can view code here

Upvotes: 0

jme11
jme11

Reputation: 17407

In CSS the background property is a shorthand. When you write background and provide a color it is short for background-color, but if you provide a gradient value, it is short for background-image. By default, a background-image is rendered above the background-color when both are applied.

Importantly, since Tailwind doesn't have this shorthand concept, you have to specifically remove the background image in order for the background-color to be visible on hover. Below are the classes to add, so that you can use TailwindCSS and remove the style object entirely.

In TailwindCSS, when you want to provide an arbitrary value (such as a color that's not included in your theme), you use square brackets [] with no spaces in the value you put inside them.

Replace this style object in your code:

{
  background: 'linear-gradient(0deg, rgba(255, 75, 75, 0.2), rgba(255, 75, 75, 0.2)), rgba(41, 40, 56, 0.75)',
  "backdrop-filter": 'blur(12.5px)',
  ":hover": { background: "#FF4B4B" }
}

with the following TailwindCSS class:

bg-gradient-to-r             : gradient to right
from-[rgba(255,75,75,0.2)]   : starting colorstop  
via-[rgba(255,75,75,0.2)]    : any mid colorstops
to-[rgba(41,40,56,0.75)]     : ending colorstop
backdrop-blur-md             : equivalent to backdrop-filter: blur(12px);
hover:bg-[#FF4B4B]           : hover pseudo with arbitrary background color        
hover:bg-none                : hover sets the background-image to none

Updated example:

<div className="rounded-4 center z-50 flex h-full cursor-pointer flex-row items-center gap-1.5 bg-gradient-to-r from-[rgba(255,75,75,0.2)] via-[rgba(255,75,75,0.2)] to-[rgba(41,40,56,0.75)] px-2 backdrop-blur-md transition-all hover:bg-[#FF4B4B] hover:bg-none xl:gap-2">
   ...
</div>

Upvotes: 2

Related Questions