Bird
Raised Fist0
Tailwindmarkup~5 mins

Hidden and visibility control in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Sometimes you want to hide parts of a webpage or control if something is visible. This helps keep the page clean or show things only when needed.

Hide a menu on small screens and show it on bigger screens.
Temporarily hide a loading spinner after content loads.
Show a message only when a user clicks a button.
Hide decorative images from screen readers for better accessibility.
Control visibility of elements during animations or transitions.
Syntax
Tailwind
hidden
visible
invisible

hidden completely hides an element and removes it from the page layout.

invisible hides the element but keeps its space on the page.

Examples
This element will not show and won't take any space on the page.
Tailwind
<div class="hidden">This text is hidden and takes no space.</div>
This element is invisible but still takes up space, so layout stays the same.
Tailwind
<div class="invisible">This text is invisible but space is reserved.</div>
This element is visible normally.
Tailwind
<div class="visible">This text is visible.</div>
Sample Program

This page shows three examples: a hidden paragraph that disappears completely, an invisible paragraph that keeps space but is not seen, and a visible paragraph. There's also a button that toggles a hidden message on and off.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hidden and Visibility Control</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 font-sans">
  <h1 class="text-2xl mb-4">Hidden and Visibility Control Example</h1>

  <div class="mb-2 bg-blue-100 p-3">
    <p class="hidden">This paragraph is hidden and takes no space.</p>
    <p class="visible">This paragraph is visible and shows normally.</p>
  </div>

  <div class="mb-2 bg-green-100 p-3">
    <p class="invisible">This paragraph is invisible but space is reserved.</p>
    <p>This paragraph is below the invisible one.</p>
  </div>

  <button id="toggleBtn" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded">Toggle Hidden Text</button>

  <p id="toggleText" class="hidden mt-2 bg-yellow-100 p-2">You toggled me visible!</p>

  <script>
    const btn = document.getElementById('toggleBtn');
    const text = document.getElementById('toggleText');
    btn.addEventListener('click', () => {
      text.classList.toggle('hidden');
    });
  </script>
</body>
</html>
OutputSuccess
Important Notes

Use hidden when you want to remove an element completely from view and layout.

Use invisible when you want to hide something but keep the space it occupies, so the page layout doesn't jump.

Toggle visibility with JavaScript by adding or removing the hidden class for interactive effects.

Summary

hidden hides and removes element space.

invisible hides but keeps space.

Use these classes to control what users see and keep your page tidy.

Practice

(1/5)
1. What does the Tailwind CSS class hidden do to an element?
easy
A. It changes the element's color to transparent.
B. It hides the element and removes its space from the layout.
C. It makes the element semi-transparent.
D. It hides the element but keeps its space in the layout.

Solution

  1. Step 1: Understand the hidden class effect

    The hidden class in Tailwind CSS sets display: none;, which hides the element completely.

  2. Step 2: Effect on layout space

    Because the element is removed from the layout flow, its space is also removed, so no empty gap remains.

  3. Final Answer:

    It hides the element and removes its space from the layout. -> Option B

  4. Quick Check:

    hidden = hides + removes space [OK]
Hint: Hidden removes element and space; invisible hides but keeps space [OK]
Common Mistakes:
  • Thinking hidden keeps space like invisible
  • Confusing hidden with opacity or visibility
  • Assuming hidden only makes element transparent
2. Which Tailwind CSS class hides an element but keeps its space reserved in the layout?
easy
A. hidden
B. opacity-0
C. sr-only
D. invisible

Solution

  1. Step 1: Identify the class that hides but keeps space

    The invisible class sets visibility: hidden;, which hides the element but keeps its space.

  2. Step 2: Compare with other options

    hidden removes element and space, opacity-0 makes element transparent but still interactive, sr-only hides visually but accessible to screen readers.

  3. Final Answer:

    invisible -> Option D

  4. Quick Check:

    invisible = hide but keep space [OK]
Hint: Invisible hides but reserves space; hidden removes space [OK]
Common Mistakes:
  • Choosing hidden instead of invisible
  • Confusing opacity-0 with invisible
  • Thinking sr-only hides visually and removes space
3. What will be the visible result of this HTML snippet with Tailwind classes?
<div class="w-24 h-24 bg-blue-500 hidden">Box</div>
<div class="w-24 h-24 bg-red-500 invisible">Box</div>
medium
A. Only the red box space is reserved but not visible; blue box is hidden and removed.
B. No boxes visible; both hidden and invisible hide elements.
C. Only the red box is visible but transparent.
D. Both boxes visible but blue is hidden behind red.

Solution

  1. Step 1: Analyze the blue box with hidden

    The blue box has hidden, so it is not visible and its space is removed from layout.

  2. Step 2: Analyze the red box with invisible

    The red box is invisible, so it is hidden but its space remains reserved in the layout, leaving an empty gap.

  3. Final Answer:

    Only the red box space is reserved but not visible; blue box is hidden and removed. -> Option A

  4. Quick Check:

    hidden removes element; invisible hides but keeps space [OK]
Hint: Hidden removes element; invisible keeps space but hides content [OK]
Common Mistakes:
  • Thinking invisible shows a transparent box
  • Assuming hidden keeps space
  • Believing both boxes are visible
4. You want to hide a button visually but keep it accessible for screen readers. Which Tailwind class should you use?
medium
A. sr-only
B. invisible
C. hidden
D. opacity-0

Solution

  1. Step 1: Understand accessibility needs

    To hide visually but keep accessible, the element must be off-screen but still in the accessibility tree.

  2. Step 2: Identify the correct Tailwind class

    sr-only hides the element visually but keeps it readable by screen readers, unlike hidden or invisible.

  3. Final Answer:

    sr-only -> Option A

  4. Quick Check:

    sr-only = hide visually, keep screen reader access [OK]
Hint: Use sr-only to hide visually but keep screen reader access [OK]
Common Mistakes:
  • Using hidden which removes from accessibility tree
  • Using invisible which hides visually but not accessible
  • Using opacity-0 which hides visually but still interactive
5. You have a navigation menu that should be hidden on mobile but visible on larger screens. Which Tailwind classes correctly hide the menu on small screens but show it on medium and above?
hard
A. block md:hidden
B. invisible md:hidden
C. hidden md:block
D. hidden md:hidden

Solution

  1. Step 1: Understand responsive classes

    hidden hides element by default (mobile), md:block shows element as block on medium screens and larger.

  2. Step 2: Check other options

    invisible md:hidden hides but keeps space on mobile and hides on medium, so menu never visible. block md:hidden shows on mobile but hides on medium, opposite of requirement. hidden md:hidden hides always.

  3. Final Answer:

    hidden md:block -> Option C

  4. Quick Check:

    Hide mobile, show medium+ = hidden md:block [OK]
Hint: Use hidden for mobile, md:block to show on medium screens [OK]
Common Mistakes:
  • Using md:hidden hides on medium screens instead of showing
  • Using invisible which keeps space and confuses layout
  • Using hidden md:hidden hides always