Fill background color left to right

[TIEverton]

How can I simulate this effect with tailwind?

https://codepen.io/kay8/pen/azKbjN

[wongjn]

You should be able to apply the same CSS properties as the example using Tailwind classes.

[TIEverton]

I believe that some of these classes are not available in tailwind as
background: linear-gradient(to right, black 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;

or I don't have the slightest idea how to implement this

[wongjn]

They are available:

• background-image: linear-gradient(to right, black 50%, white 50%) can be applied with bg-gradient-to-right from-black from-50% to-white to-50%.
• background-size: 200% 100% can be applied with bg-[length:200%_100%].
• background-position: right bottom can be applied as bg-right-bottom.

[filipmyllari]

@TIEverton Could you share your solution? I am currently trying to make this work in tailwind

[andymccray]

@filipmyllari I’d probably do something like this to avoid transitioning the background-position property: https://play.tailwindcss.com/VdwQLu9ebv