Tailwind CSS Display
The tailwind display utility class allows you to control how elements appear in the layout — block, inline, grid, flex, etc.
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
A
B
C
D
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:inline
sets 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
This element is initially rendered as an inline-level element, but starting from the medium breakpoint and above, it becomes a block-level element.
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
This is a tooltip!
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.jsmodule.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;
useopacity
,translate
, orscale
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
Class | Properties |
---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
flex | display: flex; |
inline-flex | display: flex; |
table | display: table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row-group | display: table-row-group; |
table-row | display: table-row; |
flow-root | display: flow-root; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
list-item | display: list-item; |
hidden | display: none; |
✨ What's Next?
Now that you’ve learned Tailwind CSS Display, try experimenting with:
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
