Tailwind CSS Display

Tailwind CSS provides utility classes for controlling the display property of an element. These utilities let you determine how an element participates in the layout, such as whether it behaves as a block element, inline element, flex container, grid container, table element, or is hidden.

<div class="block">Block element</div>
<div class="flex">Flex container</div>
<div class="grid">Grid container</div>

The current Tailwind CSS documentation provides utilities for several display values, including block, inline, inline-block, flex, grid, contents, table, list-item, and hidden.

Display Classes

These utilities correspond to the display utilities currently documented by Tailwind CSS.

Tailwind CSS Block Element (block Class)

The block utility sets an element's display property to block.

<div class="block">
    This is a block element.
</div>

It generates:

display: block;

A block-level element normally starts on a new line and takes up the available width of its containing block.

<div class="space-y-4">
    <span class="block rounded-lg bg-green-500 p-4">Item 1</span>
    <span class="block rounded-lg bg-green-500 p-4">Item 2</span>
    <span class="block rounded-lg bg-green-500 p-4">Item 3</span>
</div>

The three <span> elements are displayed one below another because each element has the block utility.

Tailwind CSS Inline Element (inline Class)

The inline utility sets:

display: inline;

It makes an element participate in the inline flow of its surrounding content.

<p>
    This is
    <span class="inline font-bold">inline content</span>
    inside a paragraph.
</p>

Unlike block-level elements, inline elements generally remain on the same line as surrounding content when there is enough available space. The inline utility is useful when you want an element to behave like normal inline content.

Tailwind CSS Inline-Block Element (inline-block Class)

The inline-block utility sets:

display: inline-block;

It combines characteristics of inline and block-level elements. The element participates in the inline flow while allowing dimensions such as width and height to be applied.

<div class="space-x-2">
    <span class="inline-block h-12 w-32 rounded-lg bg-green-500 p-3">
        1
    </span>

    <span class="inline-block h-12 w-32 rounded-lg bg-green-500 p-3">
        2
    </span>

    <span class="inline-block h-12 w-32 rounded-lg bg-green-500 p-3">
        3
    </span>
</div>

The elements appear next to each other while still accepting width and height.

Tailwind CSS Flex Container (flex Class)

The flex utility sets:

display: flex;

It creates a block-level flex container. You can then use other Flexbox utilities such as items-center, justify-between, gap-*, and flex-1 to control the layout of its children.

<div class="flex items-center gap-4">
    <div class="rounded-lg bg-green-500 p-4">1</div>
    <div class="rounded-lg bg-green-500 p-4">2</div>
    <div class="rounded-lg bg-green-500 p-4">3</div>
</div>

The flex utility itself does not make a layout responsive. You can combine it with Tailwind's responsive variants to change the display behavior at different screen sizes.

<div class="block md:flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Here, the element is a block element by default and becomes a flex container at the md breakpoint. Tailwind supports responsive variants such as md: for display utilities.

Tailwind CSS Inline Flex (inline-flex Class)

The inline-flex utility sets:

display: inline-flex;

It creates an inline-level flex container that can flow alongside surrounding text or other inline-level content.

<p>
    Choose
    <span class="inline-flex items-center gap-2 rounded bg-gray-200 px-3 py-1">
        <span>Option</span>
        <span>1</span>
    </span>
    to continue.
</p>

Unlike flex, which creates a block-level flex container, inline-flex participates in the surrounding inline flow.

Tailwind CSS Grid Container (grid Class)

The grid utility sets:

display: grid;

It creates a block-level grid container. You can combine it with grid utilities such as grid-cols-*, grid-rows-*, and gap-* to define the grid layout.

<div class="grid grid-cols-3 gap-4">
    <div class="rounded bg-green-500 p-4">1</div>
    <div class="rounded bg-green-500 p-4">2</div>
    <div class="rounded bg-green-500 p-4">3</div>
</div>

This creates a grid with three columns.

Tailwind CSS Inline Grid (inline-grid Class)

The inline-grid utility sets:

display: inline-grid;

It creates an inline-level grid container that can flow alongside surrounding content.

<span class="inline-grid grid-cols-3 gap-2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</span>

Tailwind CSS Flow Root (flow-root Class)

The flow-root utility sets:

display: flow-root;

It creates a block-level element with its own block formatting context.

<div class="flow-root">
    <div class="float-left w-32 bg-green-500 p-4">
        Content
    </div>
</div>

Unlike the original display article's description, flow-root does not mean "set the default display value." It specifically creates a new block formatting context.

Tailwind CSS Contents (contents Class)

The contents utility sets:

display: contents;

It makes the element's own box disappear while keeping its children in the layout. Tailwind describes this as creating a "phantom" container whose children behave like direct children of the parent.

<div class="flex gap-4">
    <div class="flex-1">1</div>

    <div class="contents">
        <div class="flex-1">2</div>
        <div class="flex-1">3</div>
    </div>

    <div class="flex-1">4</div>
</div>

The contents element itself does not create a box in the layout, while its children participate in the parent's layout.

Tailwind CSS Table Display Classes

Tailwind CSS provides several utilities for creating table-like layouts:

• table
• inline-table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row-group
• table-row

These utilities correspond to the CSS display values used for table structures.

<div class="table w-full">
    <div class="table-header-group">
        <div class="table-row">
            <div class="table-cell p-2 font-bold">Name</div>
            <div class="table-cell p-2 font-bold">Age</div>
        </div>
    </div>

    <div class="table-row-group">
        <div class="table-row">
            <div class="table-cell p-2">John</div>
            <div class="table-cell p-2">25</div>
        </div>

        <div class="table-row">
            <div class="table-cell p-2">Jane</div>
            <div class="table-cell p-2">30</div>
        </div>
    </div>
</div>

The table, table-row, table-cell, and related utilities allow non-table elements to participate in table-style layouts.

Tailwind CSS List Item (list-item Class)

The list-item utility sets:

display: list-item;

It makes an element behave like a list item.

<div class="list-item">
    List item
</div>

This utility is useful when you need an element to participate in list-item layout behavior without changing the HTML element itself.

Tailwind CSS Hidden Element (hidden Class)

The hidden utility sets:

display: none;

It removes the element from the document layout.

<div class="hidden">
    This content is not displayed.
</div>

<div class="flex">
    <div class="hidden">01</div>
    <div>02</div>
    <div>03</div>
</div>

The first element does not occupy space in the flex layout because hidden sets display: none. If you want to hide an element visually while keeping its space in the layout, use a visibility utility instead of hidden.

Responsive Display Utilities

Tailwind CSS allows display utilities to be combined with responsive variants. Prefix a display utility with a breakpoint such as md: to apply it at that breakpoint and above.

<div class="block md:flex">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

In this example:

• block applies by default.
• md:flex changes the element to a flex container at the md breakpoint and above.

Another example is:

<nav class="hidden md:flex">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

This hides the navigation by default and displays it as a flex container at the md breakpoint and above.