Layout

Display

Utilities for controlling the display box type of an element.

Quick reference

Class
Properties
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-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;
list-itemdisplay: list-item;
hiddendisplay: none;

Show all classes

Basic usage

Block & Inline

Use inline, inline-block, and block to control the flow of text and elements.

Display - 图1

  1. <div>
  2. When controlling the flow of text, using the CSS property
  3. <span class="inline">display: inline</span>
  4. will cause the text inside the element to wrap normally.
  5. While using the property <span class="inline-block">display: inline-block</span>
  6. will wrap the element to prevent the text inside from extending beyond its parent.
  7. Lastly, using the property <span class="block">display: block</span>
  8. will put the element on its own line and fill its parent.
  9. </div>

Flow Root

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

Display - 图2

  1. <div class="p-4">
  2. <div class="flow-root ...">
  3. <div class="my-4 ...">Well, let me tell you something, ...</div>
  4. </div>
  5. <div class="flow-root ...">
  6. <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  7. </div>
  8. </div>

Flex

Use flex to create a block-level flex container.

Display - 图3

  1. <div class="flex items-center">
  2. <img src="path/to/image.jpg">
  3. <div>
  4. <strong>Andrew Alfred</strong>
  5. <span>Technical advisor</span>
  6. </div>
  7. </div>

Inline Flex

Use inline-flex to create an inline flex container that flows with text.

Display - 图4

  1. <p>
  2. Today I spent most of the day researching ways to ...
  3. <span class="inline-flex items-baseline">
  4. <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
  5. <span>Kramer</span>
  6. </span>
  7. keeps telling me there is no way to make it work, that ...
  8. </p>

Grid

Use grid to create a grid container.

Display - 图5

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

Inline Grid

Use inline-grid to create an inline grid container.

Display - 图6

  1. <span class="inline-grid grid-cols-3 gap-4">
  2. <span>01</span>
  3. <span>02</span>
  4. <span>03</span>
  5. <span>04</span>
  6. <span>05</span>
  7. <span>06</span>
  8. </span>
  9. <span class="inline-grid grid-cols-3 gap-4">
  10. <span>01</span>
  11. <span>02</span>
  12. <span>03</span>
  13. <span>04</span>
  14. <span>05</span>
  15. <span>06</span>
  16. </span>

Contents

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

Display - 图7

  1. <div class="flex ...">
  2. <div class="flex-1 ...">01</div>
  3. <div class="contents">
  4. <div class="flex-1 ...">02</div>
  5. <div class="flex-1 ...">03</div>
  6. </div>
  7. <div class="flex-1 ...">04</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 - 图8

  1. <div class="table w-full ...">
  2. <div class="table-header-group ...">
  3. <div class="table-row">
  4. <div class="table-cell text-left ...">Song</div>
  5. <div class="table-cell text-left ...">Artist</div>
  6. <div class="table-cell text-left ...">Year</div>
  7. </div>
  8. </div>
  9. <div class="table-row-group">
  10. <div class="table-row">
  11. <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
  12. <div class="table-cell ...">Malcolm Lockyer</div>
  13. <div class="table-cell ...">1961</div>
  14. </div>
  15. <div class="table-row">
  16. <div class="table-cell ...">Witchy Woman</div>
  17. <div class="table-cell ...">The Eagles</div>
  18. <div class="table-cell ...">1972</div>
  19. </div>
  20. <div class="table-row">
  21. <div class="table-cell ...">Shining Star</div>
  22. <div class="table-cell ...">Earth, Wind, and Fire</div>
  23. <div class="table-cell ...">1975</div>
  24. </div>
  25. </div>
  26. </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 - 图9

  1. <div class="flex ...">
  2. <div class="hidden ...">01</div>
  3. <div>02</div>
  4. <div>03</div>
  5. </div>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:inline-flex to only apply the inline-flex utility on hover.

  1. <div class="flex hover:inline-flex">
  2. <!-- ... -->
  3. </div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.