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?
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