I'm an amateur in CSS and new to TailwindCSS, so I'm not sure where to start to solve this issue.

I have a <p> element, right now it appears on hover with 300ms delay, but I want it to disappear without delay at all. How can I implement this?

<p className={`opacity-0 group-hover:opacity-100 delay-300`}>
  Lorem ipsum
</p>

‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

I'm an amateur in CSS and new to TailwindCSS, so I'm not sure where to start to solve this issue.

I have a <p> element, right now it appears on hover with 300ms delay, but I want it to disappear without delay at all. How can I implement this?

<p className={`opacity-0 group-hover:opacity-100 delay-300`}>
  Lorem ipsum
</p>

‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

• tailwind-css

1 Answer 1

To ensure there's no delay when the element disappears, set the delay to 0 by default. To have a delay only when the element appears, specify the delay using the group-hover: variant, e.g., delay-300.

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="group">
  Try Here (mouse on: 800ms delay; mouse out: 0ms delay)
  
  <p class="
    opacity-0 transition-opacity duration-300 delay-0
    group-hover:opacity-100 group-hover:delay-800
  ">
    Lorem ipsum
  </p>
</div>

Since as long as the hover event is active, the group-hover: variant will apply the delay-800, it will be effective during the appearance. However, once you move the mouse away and the hover event ends, the group-hover:delay-800 will immediately stop, and for the disappearance, the delay-0 will apply.