0
0
Tailwindmarkup~5 mins

Hidden and visibility control in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.