Hover Effect on Tailwind

Viewed 50

I'm in a glass case of emotion right now

I'm trying to convert the following hover effect to tailwind but not sure why it isn't working. Screenshot as follows:

Hover on SVG icon

Here is the original code using css


    .navbar-text button::before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  background-color: #fff;
  left: 0;
  top: 0;
  z-index: -1;
  transition: 0.3s ease-in-out;
}

and here is my tailwind setup for this icon

    navIcon: `rounded-full w-12 h-12 object-none border  transition-colors justify-center before:bg-white before:rounded-lg before:scale-0 before:bg-white

Appreciate the help

1 Answers

i think, you should know how tailwind css works, please understand basic concept Tailwind CSS. basically tailwind work without we edit any css file, we edit in class on html, so if you want to know how hover work in tailwind, please come here. So keep learning, and happy coding.

Related