LEARN

Tailwind CSS Visibility

This class accepts two values in tailwind CSS. It is the alternative to the CSS visibility property. This class is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. Use the display property to remove or hide and delete an element from the browser.

In Tailwind CSS, the visibility utilities allow you to control the visibility of elements while maintaining their space in the layout. The key classes include:

visible: The default state where the element is visible.
invisible: Hides the element but keeps its space occupied in the layout.
hidden: Completely removes the element from the layout, and it does not take up space.

Tailwind css visible

It is the default value. The element is shown or visible normally in the web document.

HTML

<div class="flex bg-indigo-200 w-full text-center rounded-md p-4 mx-16 gap-2 mt-4 ">
    <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">1
    </div>
    <div class="flex-1 visible py-3 bg-indigo-600 text-white rounded-lg">2
    </div>
    <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">3
    </div>
</div>

Tailwind Css invisible

This class is used to hide the element from the page but takes up space in the document

HTML

<div class="flex bg-indigo-200 w-full text-center rounded-md p-4 mx-16 gap-2 mt-4 ">
    <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">1
    </div>
    <div class="flex-1 invisible py-3 bg-indigo-600 text-white rounded-lg">2
    </div>
    <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">3
    </div>
</div>

Tailwind Css Hidden

This class is used to hide the element from the page.

HTML

<div class="flex bg-indigo-200 w-full text-center rounded-md p-4 mx-16 gap-2 mt-4 ">
    <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">1
    </div>
    <div class="flex-1 hidden py-3 bg-indigo-600 text-white rounded-lg">2
    </div>
    <div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">3
    </div>
</div>