Display

Basic usage

Block & Inline

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

<div>
  When controlling the flow of text, using the CSS property
  <span className="**inline**">display: inline</span>
  will cause the text inside the element to wrap normally.

  While using the property <span className="**inline-block**">display: inline-block</span>
  will wrap the element to prevent the text inside from extending beyond its parent.

  Lastly, using the property <span className="**block**">display: block</span>
  will put the element on it's own line and fill its parent.
</div>

Flow Root

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

<div className="p-4">
  <div className="**flow-root** ...">
    <div className="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div className="**flow-root** ...">
    <div className="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>

Flex

Use flex to create a block-level flex container.

<div className="**flex** items-center">
  <img src="path/to/image.jpg">
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

Inline Flex

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

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

Grid

Use grid to create a grid container.

<div className="**grid** gap-4 grid-cols-3 grid-rows-3">
  <!-- ... -->
</div>

Inline Grid

Use inline-grid to create an inline grid container.

<span className="**inline-grid** grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span className="**inline-grid** grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

Contents

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

<div className="flex ...">
  <div className="flex-1 ...">01</div>
  <div className="contents">
    <div className="flex-1 ...">02</div>
    <div className="flex-1 ...">03</div>
  </div>
  <div className="flex-1 ...">04</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.

<div className="**table** w-full ...">
  <div className="**table-header-group** ...">
    <div className="**table-row**">
      <div className="**table-cell** text-left ...">Title</div>
      <div className="**table-cell** text-left ...">Artist</div>
      <div className="**table-cell** text-left ...">Year</div>
    </div>
  </div>
  <div className="**table-row-group**">
    <div className="**table-row**">
      <div className="**table-cell** ...">Chocolate Starfish And The Hot Dog Flavored Water</div>
      <div className="**table-cell** ...">Limp Bizkit</div>
      <div className="**table-cell** ...">2000</div>
    </div>
    <div className="**table-row**">
      <div className="**table-cell** ...">Significant Other</div>
      <div className="**table-cell** ...">Limp Bizkit</div>
      <div className="**table-cell** ...">1999</div>
    </div>
    <div className="**table-row**">
      <div className="**table-cell** ...">Three Dollar Bill, Y’all $</div>
      <div className="**table-cell** ...">Limp Bizkit</div>
      <div className="**table-cell** ...">1997</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).

<div className="flex ...">
  <div className="**hidden** ...">01</div>
  <div>02</div>
  <div>03</div>
</div>