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?
The hidden utility hides the element and removes it from the layout. It's the equivalent of the display: none; in CSS
The invisible utility hides the element and keeps it into the layout. It's the equivalent of the visibility: hidden; in CSS
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