Difference between invisible and hidden utilities

Difference between invisible and hidden utilities

You have access to two different utilities to hide an element in TailwindCSS: hidden and invisible. But what are the differences between those two TailwindCSS utilities?

invisible and hidden TailwindCSS utilities differences

Hidden

The hidden utility hides the element and removes it from the layout. It's the equivalent of the display: none; in CSS

Documentation: tailwindcss.com/docs/display#hidden

Invisible

The invisible utility hides the element and keeps it into the layout. It's the equivalent of the visibility: hidden; in CSS

Documentation: tailwindcss.com/docs/visibility

What about opacity-0?

The opacity utility could hide the layout element, like the invisible utility, but will still be reacting to mouse events such as Hover, click, focus.

You can also use them in re