Display

The display property controls how an element generates boxes. Tailwind's display utilities let you toggle between block, inline, flex, grid, and other display modes directly in your HTML.

Common display utilities

<div class="block">Block — takes full width</div>
<span class="inline">Inline — flows with text</span>
<span class="inline-block">Inline Block — inline with width/height</span>
<div class="flex">Flex container</div>
<div class="grid">Grid container</div>
<div class="hidden">Hidden — not displayed</div>
    

Responsive display

You can show and hide elements at different breakpoints. This is how you build responsive layouts without media queries.

<!-- Hidden on mobile, block on medium screens -->
<div class="hidden md:block">
  Only visible on medium screens and up
</div>

<!-- Visible only on mobile -->
<div class="block md:hidden">
  Only visible on mobile
</div>
    

Table display

Tailwind also includes utilities for table layouts.

<div class="table">Table display</div>
<div class="table-row">Table row</div>
<div class="table-cell">Table cell</div>
<div class="table-caption">Table caption</div>