Responsive Visibility with Tailwind CSS

Learn how to effectively show and hide elements across different screen sizes using Tailwind CSS's responsive utilities.

The Problem

When working with responsive design, you often need to control element visibility based on screen size. Tailwind CSS provides breakpoint-based utilities, but they work with min-width media queries by default, which can be confusing when you want to hide elements specifically on smaller screens.

Tailwind CSS Breakpoints

First, understand Tailwind's default breakpoints:

Breakpoint	Minimum Width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

These are min-width breakpoints, meaning styles apply from that width upward.

Solution: Using max-* Breakpoints

The most straightforward approach is using Tailwind's max-* variants, which apply styles up to a specific breakpoint:

<div class="max-lg:hidden">Content visible only on large screens and up</div>

This element will be hidden on screens smaller than 1024px (the lg breakpoint) and visible on screens 1024px and larger.

Alternative Approach: Standard Breakpoints

You can also combine the standard hidden and responsive display utilities:

<div class="hidden lg:block">01</div>

This element is hidden by default and only becomes visible (as a block element) on large screens and above.

Complete Example

HTML Template

<div class="flex">
  <div class="hidden lg:block">Visible only on large screens</div>
  <div>Always visible content</div>
  <div>More content</div>
</div>

Custom CSS Approach

@media (max-width: 1023px) {
  .hide-below-lg {
    display: none;
  }
}

TIP

For maximum control, consider combining both approaches:

<div class="max-md:hidden md:flex lg:hidden">
  Content visible only on medium screens
</div>

Important Considerations

WARNING

Avoid using visibility: hidden (invisible class) instead of display: none (hidden class) if you want to completely remove the element from layout flow. visibility: hidden hides the element but preserves its space in the layout.

Anti-pattern

Don't use scaling transforms (scale-0) to hide elements as suggested in some answers. This approach affects layout and accessibility differently than proper display control.

Configuration

Ensure your Tailwind CSS is properly configured. For most setups, the default configuration includes all necessary responsive utilities:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

When to Use Each Approach

• Use max-*:hidden when you need precise control over the maximum width where an element should be hidden
• Use hidden md:block when you want to toggle between hidden and a specific display value
• The max-* approach is generally more intuitive for "hide below this size" scenarios

Browser Compatibility

Both approaches work in all modern browsers. The max-* variants rely on CSS media queries with max-width, which have excellent browser support.

Choose the method that best fits your specific use case and makes your code most readable and maintainable.