Tailwind Display

The tailwind display utility class allows you to control how elements appear in the layout — block, inline, grid, flex, etc. With Tailwind's display class, you can easily modify how elements are rendered and positioned within the document flow. This is foundational stuff when structuring UIs.

How to apply Tailwind Display

To apply a specific tailwind display behavior to an element, you can use the {value} utility class, where {value} represents the desired display behavior. Here are the common values you can use:

• block: Renders the element as a block-level element, taking up the entire width of its parent container.

• inline: Renders the element as an inline-level element, allowing other elements to flow around it.

• inline-block: Renders the element as an inline-level block, allowing other elements to flow around it while also respecting its width and height.

• hidden: Hides the element from the layout, making it effectively invisible and not taking up any space. etc. Check the table below to see all the classes of display you can use.

  Here's an example:

<div>
  <p class="block">A</p>
  <p class="block">B</p>
  <p class="block">C</p>
  <p class="block">D</p>
</div>

Preview

Responsive Tailwind Display

Tailwind CSS allows you to apply display classes responsively at different breakpoints. To use responsive tailwind display classes, you can append the breakpoint prefix to the utility class. For example, md:inlinesets the display behavior to inline starting from the medium breakpoint and above.

<div class="inline md:block">
  This element is initially rendered as an inline-level element, but starting
  from the medium breakpoint and above, it becomes a block-level element.
</div>

Preview

In the above example, the display behavior of the <div> element is set to inline by default (inline), but starting from the medium breakpoint and above, it changes to block-level (md:block).

Interaction State (hover/focus)

Useful for things like dropdowns, modals, or toggles:

<div class="relative group inline-block">
  <button class="bg-indigo-600 text-white px-4 py-2 rounded">
    Hover me
  </button>

  <!-- Tooltip appears on hover -->
  <div class="absolute left-1/2 top-full mt-2 w-40 -translate-x-1/2 transform rounded bg-gray-800 p-2 text-sm text-white shadow-lg
              hidden group-hover:block">
    This is a tooltip!
  </div>
</div>

Preview

Arbitrary Value Usage

Tailwind restricts display to known keywords. Arbitrary values (like display-[contents]) aren't allowed by default due to validation, but you can still add them using custom classes or @layer as above.

Customization in tailwind.config.js

Tailwind doesn’t allow custom display values directly. It’s limited to valid display modes, so you’d extend variants or create component classes if needed:

Edit
// tailwind.config.js
module.exports = {
  extend: {
    display: ['group-hover'],
  },
}

Want run-in or contents? Use @layer utilities:

@layer utilities {
  .display-contents {
    display: contents;
  }
}

Real UI Component Examples

Nav Tabs with Conditional Items

<div class="flex flex-wrap border-b">
  <button class="px-4 py-2 text-sm text-gray-500 hover:text-black">Overview</button>
  <button class="px-4 py-2 text-sm text-gray-500 hover:text-black">Settings</button>
  <button class="ml-auto md:hidden px-4 py-2 text-sm text-gray-500">More</button>
</div>

Preview

On larger screens, all tabs show. On smaller screens, the “More” button appears via md:hidden.

Toggle dropdown visibility on hover

<div class="relative group">
  <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded">Menu</button>
  <div class="absolute left-0 hidden group-hover:flex flex-col bg-white shadow p-2">
    <a href="#" class="py-1 px-2 hover:bg-gray-100">Profile</a>
    <a href="#" class="py-1 px-2 hover:bg-gray-100">Logout</a>
  </div>
</div>

Preview

This uses group-hover:flex to reveal a dropdown styled with flexbox.

Best Practices

• Use hidden instead of conditional rendering when toggling visibility — it’s cheaper.

• Don’t animate display; use opacity, translate, or scale for smoother UX.

• Pair inline and block wisely — don't rely on them to fix layout bugs. They change flow.

• Combine with flex, grid, and spacing utilities to keep markup lean.

Accessibility Notes

• display: none hides elements from both screen readers and the DOM.

• Use aria-hidden="true" if you want screen readers to ignore content that is still visually present.

• Avoid hiding focusable elements (like buttons) using hidden without handling keyboard navigation logic.

Tailwind Display Class Table

✨ What's Next?

Now that you’ve learned Tailwind CSS Display, try experimenting with:

• Tailwind Flex

• Tailwind grid

Windframe Tailwind blocks

Logo