0
0
Tailwindmarkup~5 mins

Responsive visibility toggling in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Responsive visibility toggling helps show or hide parts of a webpage depending on the screen size. This makes your site look good on phones, tablets, and computers.

Show a simple menu button only on small screens and a full menu on larger screens.
Hide large images on small phones to save data and speed up loading.
Display extra information only on big screens where there is space.
Make buttons easier to tap on small devices by showing bigger versions.
Switch between different layouts by hiding or showing sections based on device size.
Syntax
Tailwind
hidden md:block
block md:hidden

hidden hides an element completely.

block shows an element as a block.

Adding prefixes like md: applies the style only on medium (tablet) screens and larger.

Examples
The first div is hidden on small screens and visible on medium and bigger screens.The second div is visible on small screens and hidden on medium and bigger screens.
Tailwind
<div class="hidden md:block">Visible on medium and larger screens</div>
<div class="block md:hidden">Visible only on small screens</div>
The first paragraph is hidden starting from small screens.The second paragraph appears only on large screens and bigger.
Tailwind
<p class="sm:hidden">Hidden on small screens and larger</p>
<p class="hidden lg:block">Visible only on large screens and bigger</p>
The button shows only on small screens.The navigation menu shows only on medium and larger screens using flex layout.
Tailwind
<button class="md:hidden">Menu</button>
<nav class="hidden md:flex">Full menu</nav>
Sample Program

This page shows a "Menu" button only on small screens. On medium and larger screens, it hides the button and shows a full navigation menu instead.

The paragraphs below also change text depending on screen size to explain what is visible.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Visibility Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 font-sans">
  <header class="mb-6">
    <button class="md:hidden bg-blue-600 text-white px-4 py-2 rounded" aria-label="Open menu">Menu</button>
    <nav class="hidden md:flex space-x-4" aria-label="Main navigation">
      <a href="#" class="text-blue-700 hover:underline">Home</a>
      <a href="#" class="text-blue-700 hover:underline">About</a>
      <a href="#" class="text-blue-700 hover:underline">Contact</a>
    </nav>
  </header>
  <main>
    <p class="block md:hidden">You are on a small screen. The menu button is visible.</p>
    <p class="hidden md:block">You are on a medium or larger screen. The full menu is visible.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use aria-label on buttons that only show icons or simple text for better accessibility.

Test your design by resizing the browser or using device simulation in browser DevTools.

Combine visibility classes with layout classes like flex or grid for better control.

Summary

Responsive visibility toggling shows or hides elements based on screen size.

Use Tailwind's hidden and block classes with screen prefixes like md:.

This helps create user-friendly layouts for phones, tablets, and desktops.