Visibility hidden

Tailwind CSS Visibility hidden

Use responsive visibility hidden utilities with Tailwind Elements. Learn the difference between the hidden and invisible classes and when to use them.

Basic example

The difference between the hidden and the invisible classes is that the hidden class makes the element not displayed and is removed from the page layout, while the invisible class makes the element invisible but still takes up space on the page.

Hidden

Visibility

HTML

        
            
        <!-- Hidden -->
        <div class="...">01</div>
        <div class="... hidden">02</div>
        <div class="...">03</div>

        <!-- Visibility -->
        <div class="...">01</div>
        <div class="... invisible">02</div>
        <div class="...">03</div>

Visibility hidden

Tailwind CSS Visibility hidden

Basic example

Related resources