CODEWITHSUNDEEP
csstailwind-css
Denis
Denis

Reputation: 43

How to add 2 linear gradients background in Tailwind ? static and hover

<Button className={`white-color-text bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]" bodyS my-4`} text={"Get Started"} /> I cant see to change the background color (which is linear) on active in Tailwind . Any suggestions?

Upvotes: 1

Views: 1622

Answers (1)

ChenBr
ChenBr

Reputation: 2612

You are using the hover modifier with the wrong syntax. Instead of wrapping your hover modifier (hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]"), you need to apply the modifier to each segment of your gradient utility:

<div class="bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:bg-gradient-to-r hover:from-[#fff] hover:to-[#ff6f48]">Get Started</div>

Tailwind-play

There's an explanation on how to apply modifiers on each class in the documentation, for example, for the Gradient Color Stops.

Upvotes: 1

Related Questions