Display

Utilities for controlling the display box type of an element.

Class reference

Class
Properties
.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.

Display - 图1

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

Flow-Root

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

Display - 图2

  1. <div class="flow-root bg-gray-400">
  2. <div class="my-4 block text-gray-700 text-center bg-gray-500 px-4 py-2">1</div>
  3. </div>
  4. <div class="flow-root bg-gray-200">
  5. <div class="my-4 block text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
  6. </div>

Inline Block

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

Display - 图3

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

Inline

Use .inline to create an inline element.

Display - 图4

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

Flex

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

Display - 图5

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

Inline flex

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

Display - 图6

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

Grid

Use .grid to create a grid container.

Display - 图7

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

Inline Grid

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

Display - 图8

  1. <span class="inline-grid grid-cols-3 gap-x-4">
  2. <span>1</span>
  3. <span>1</span>
  4. <span>1</span>
  5. </span>
  6. <span class="inline-grid grid-cols-3 gap-x-4">
  7. <span>2</span>
  8. <span>2</span>
  9. <span>2</span>
  10. </span>

Contents

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

Display - 图9

  1. <div class="flex bg-gray-200">
  2. <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  3. <div class="contents">
  4. <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  5. <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  6. </div>
  7. <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">4</div>
  8. </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.

Display - 图10

  1. <div class="table w-full">
  2. <div class="table-row-group">
  3. <div class="table-row">
  4. <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
  5. <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 2</div>
  6. <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">Cell 3</div>
  7. </div>
  8. <div class="table-row">
  9. <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 4</div>
  10. <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
  11. <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 6</div>
  12. </div>
  13. </div>
  14. </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).

Display - 图11

  1. <div class="flex bg-gray-200">
  2. <div class="hidden text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  3. <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  4. <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  5. </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.

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

Display - 图12

all

Display - 图13

sm

Display - 图14

md

Display - 图15

lg

Display - 图16

xl

  1. <div class="flex sm:inline-flex md:block lg:hidden xl:flex ...">
  2. <!-- ... -->
  3. </div>

1

2

3

Customizing

Responsive and pseudo-class variants

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

You can control which variants are generated for the display utilities by modifying the display property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  1. // tailwind.config.js
  2. module.exports = {
  3. variants: {
  4. // ...
  5. - display: ['responsive'],
  6. + display: ['responsive', 'hover', 'focus'],
  7. }
  8. }

Disabling

If you don’t plan to use the display utilities in your project, you can disable them entirely by setting the display property to false in the corePlugins section of your config file:

  1. // tailwind.config.js
  2. module.exports = {
  3. corePlugins: {
  4. // ...
  5. + display: false,
  6. }
  7. }

← Box Sizing   Floats →