Sections

Display

Utilities for controlling the display box type of an element.

Class Properties
.block display: block;
.inline-block display: inline-block;
.inline display: inline;
.flex display: flex;
.inline-flex display: inline-flex;
.table display: table;
.table-row display: table-row;
.table-cell display: table-cell;
.hidden display: none;

Usage

Use .block to create a block-level element.

1 2 3
<div class="bg-gray-200 p-4">
  <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2">1</span>
  <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">2</span>
  <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">3</span>
</div>

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

1
2
3
<div class="bg-gray-200">
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Use .inline to create an inline element.

1
2
3
<div class="bg-gray-200">
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">1</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">3</div>
</div>

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

1
2
3
<div class="flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

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

1
2
3
<div class="inline-flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Tables

Use the .table, .table-row, and .table-cell to create elements that behave like a <table>, <tr>, or <td> element, respectively.

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 bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
      <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 2</div>
      <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 4</div>
      <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
      <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">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).

2
3
<div class="flex bg-gray-200">
  <div class="hidden text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Variants

By default, only responsive variants are generated for display utilities.

Responsive

To control the display behavior of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility.

For example, use .md:block to apply the block utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:block, add "display" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "display",
);