I want to do this vanilla css animation to tailwind can somebody help me what is the best way?

https://codesandbox.io/p/sandbox/button-hover-9n8k3x?file=%2Findex.html%3A10%2C9

4 Replies

Mannix•3mo ago

use the official tailwind docs it's not that hard i manage to do it w/o knowing tailwing

As Mannix has said, it is fairly straight forward if you follow the Tailwind docs. I would probably do something like this:

<button class="border-none outline-none ring-0 py-4 px-12 bg-black text-white text-sm font-semibold tracking-wider uppercase relative isolate overflow-hidden transition duration-300 hover:text-black focus-visible:text-black
        after:absolute
        after:inset-[-50%]
        after:bg-white
        after:-z-10
        after:rounded-b-[50%]
        after:translate-y-[-75%]
        after:transition-all
        after:duration-700
        after:ease-[cubic-bezier(0.52,1.64,0.37,0.66)]
        hover:after:translate-y-0
        focus-visible:after:translate-y-0
    ">Hover ME</button>

<button class="border-none outline-none ring-0 py-4 px-12 bg-black text-white text-sm font-semibold tracking-wider uppercase relative isolate overflow-hidden transition duration-300 hover:text-black focus-visible:text-black
        after:absolute
        after:inset-[-50%]
        after:bg-white
        after:-z-10
        after:rounded-b-[50%]
        after:translate-y-[-75%]
        after:transition-all
        after:duration-700
        after:ease-[cubic-bezier(0.52,1.64,0.37,0.66)]
        hover:after:translate-y-0
        focus-visible:after:translate-y-0
    ">Hover ME</button>

(note - I have placed the pseudo element classes on new lines just for clarity) https://codepen.io/cbolson/pen/NWZgmmm

Kevin•3mo ago

yes I finally did it that way. I brute forced to see equivalent tailwind properties. I was just hoping there was another way or proper way to do it in tailwind. maybe i should have cleared my question.

Mannix•3mo ago

that is tailwind for you. you can make custom classes that you can use https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes

Adding Custom Styles - Tailwind CSS

Best practices for adding your own custom styles to Tailwind.

Gaming

Programming

I want to do this vanilla css animation to tailwind can somebody help me what is the best way?