Published on

Tailwind CSS: Using Hidden and Visible Classes

Authors
  • Name
    Ripal & Zalak
    Twitter

How to Use Hidden and Block Classes in Tailwind CSS

Tailwind CSS provides utility classes like hidden and block (or inline-block) to control the visibility of elements. These classes are especially useful for creating responsive designs where specific elements need to be shown or hidden on different screen sizes.

In this blog, we’ll explain how to use hidden and visible utilities, troubleshoot common issues, and showcase examples for practical usage.

The Problem

A common requirement is to hide an element on smaller screens (like mobile and tablet) and show it only on larger screens. For example, using sm:hidden hides the element on small screens and larger, but combining it with md:visible doesn’t work as expected.

Let’s break this down and explore the solution.

Tailwind CSS Default Breakpoints

Tailwind CSS uses a mobile-first approach, meaning styles for smaller screens are applied by default, and styles for larger screens are layered on top using breakpoints. The breakpoints are:

  • sm: 640px (small screens)
  • md: 768px (medium screens)
  • lg: 1024px (large screens)
  • xl: 1280px (extra-large screens)
  • 2xl: 1536px (2x extra-large screens)

Solution: Using hidden and block

To hide an element on small and medium screens while keeping it visible on large screens and above, use the following approach:

<div class="hidden lg:block">
  <!-- Content visible only on large screens and above -->
  <h1 class="text-3xl font-bold">Visible on large screens</h1>
</div>

Here’s what happens:

  • hidden: The element is hidden by default.
  • lg:block: The element becomes visible as a block-level element on large screens (1024px) and above.

Example:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="hidden lg:block">
      <h1 class="text-3xl font-bold underline">
        Hello world! This text is visible on large screens.
      </h1>
    </div>
  </body>
</html>

Alternative Solution: max-lg:hidden

Starting with Tailwind CSS v3.2, you can use max- utilities for more concise syntax. To achieve the same effect:

<div class="max-lg:hidden">
  <h1 class="text-3xl font-bold">Visible only on large screens</h1>
</div>

Breakdown:

  • max-lg:hidden: Hides the element on screens up to and including the lg breakpoint.

Frequently Asked Questions (FAQ)

1. Why doesn’t sm:hidden md:visible work?

The hidden utility sets display: none, and there’s no visible utility in Tailwind to override this. Instead, you need to use hidden and block (or inline-block) together with breakpoints.

2. How do I show an element on smaller screens and hide it on larger ones?

Use the following:

<div class="block lg:hidden">
  <!-- Content visible only on small screens -->
</div>

Here, block shows the element by default, and lg:hidden hides it on large screens and above.

3. Can I animate visibility changes with Tailwind?

Yes! Tailwind CSS provides utilities for animations. For example:

<div class="hidden transition-opacity duration-300 ease-in-out lg:block">
  <!-- Animated visibility -->
</div>

Use opacity-0 and opacity-100 for smooth transitions if needed.