Visibility hidden

Tailwind CSS Visibility hidden

Use responsive visibility hidden utilities with TW 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

Access restricted

To view this section you must have an active PRO account

Visibility hidden

Tailwind CSS Visibility hidden

Basic example

Related resources