Elements logo

Display

Utilities for controlling the display box type of an element

Class reference

ClassProperties
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
hiddendisplay: none;

Block

Use .block to create a block-level element.

1 2 3
<div class="space-y-4 ...">
  <span class="block ...">1</span>
  <span class="block ...">2</span>
  <span class="block ...">3</span>
</div>

Flow-Root

Use .flow-root to create a block-level element with its own block formatting context.

1
2
<div class="space-y-4">
  <div class="flow-root ...">
    <div class="my-4 ...">1</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">2</div>
  </div>
</div>

Inline Block

Use .inline-block to create an inline block-level element.

1
2
3
<div class="space-x-4 ...">
  <div class="inline-block ...">1</div>
  <div class="inline-block ...">2</div>
  <div class="inline-block ...">3</div>
</div>

Inline

Use .inline to create an inline element.

1
2
3
<div>
  <div class="inline ...">1</div>
  <div class="inline ...">2</div>
  <div class="inline ...">3</div>
</div>

Flex

Use .flex to create a block-level flex container.

1
2
3
<div class="flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>

Inline flex

Use .inline-flex to create an inline flex container.

1
2
3
<div class="inline-flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>

Grid

Use .grid to create a grid container.

<div class="grid gap-4 grid-cols-3">
  <!-- ... -->
</div>

Inline Grid

Use .inline-grid to create an inline grid container.

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

Contents

Use contents to create a “phantom” container whose children act like direct children of the parent…

1
2
3
4
<div class="flex ...">
  <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>

Table

Use the .table, .table-row, .table-cell, .table-caption, .table-column, .table-column-group, .table-header-group, table-row-group, and .table-footer-group utilities to create elements that behave like their respective table elements.

A cell with more content
Cell 2
Cell 3
Cell 4
A cell with more content
Cell 6
<div class="table w-full ...">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">A cell with more content</div>
      <div class="table-cell ...">Cell 2</div>
      <div class="table-cell ...">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Cell 4</div>
      <div class="table-cell ...">A cell with more content</div>
      <div class="table-cell ...">Cell 6</div>
    </div>
  </div>
</div>

Hidden

Use .hidden to set an element to display: none and remove it from the page layout (compare with .invisible from the visibility documentation).

2
3
<div class="flex ...">
  <div class="hidden ...">1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive

To control the display property of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility class. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

<div class="flex md:inline-flex ...">
  <!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.