Display

    Utilities for controlling the display box type of an element.

    Show all classes

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

    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.

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

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

    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.

    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>
    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>

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

    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>
    7.   </div>
    8.   <div class="table-row-group">
    9.     <div class="table-row">
    11.       <div class="table-cell ...">Malcolm Lockyer</div>
    12.       <div class="table-cell ...">1961</div>
    13.     </div>
    14.     <div class="table-row">
    15.       <div class="table-cell ...">Witchy Woman</div>
    16.       <div class="table-cell ...">The Eagles</div>
    17.       <div class="table-cell ...">1972</div>
    18.     </div>
    19.     <div class="table-row">
    20.       <div class="table-cell ...">Shining Star</div>
    21.       <div class="table-cell ...">Earth, Wind, and Fire</div>
    22.       <div class="table-cell ...">1975</div>
    23.     </div>
    24.   </div>
    25. </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).

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

    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.

    For a complete list of all available state modifiers, check out the 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. </div>