Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

display

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
inline display: inline;
block display: block;
inline-block display: inline-block;
flow-root display: flow-root;
flex display: flex;
inline-flex display: inline-flex;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
list-item display: list-item;
hidden display: none;
sr-only position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0;
not-sr-only position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal;

Examples#

Block and Inline#

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

{

When controlling the flow of text, using the CSS property{" "} display: inline {" "} will cause the text inside the element to wrap normally.

While using the property{" "} display: inline-block {" "} will wrap the element to prevent the text inside from extending beyond its parent.

Lastly, using the property{" "} display: block {" "} will put the element on its own line and fill its parent.
}

<!-- [!code classes:inline,inline-block,block] -->
<p>
  When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the
  text inside the element to wrap normally.
</p>
<p>
  While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the
  text inside from extending beyond its parent.
</p>
<p>
  Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its
  parent.
</p>

Flow Root#

Use the flow-root utility to create a block-level element with its own block formatting context:

{ 

    </div>
    <div className="absolute inset-x-0 bottom-0">

    </div>
    <div className="my-4">
      Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public
      Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
    </div>
  </div>
  <div className="relative mt-0.5 flow-root">
    <div className="absolute inset-x-0">

    </div>
    <div className="absolute inset-x-0 bottom-0">

    </div>
    <div className="my-4">
      Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting
      convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library
      books? Well, let me give you a hint, junior.
    </div>
  </div>
</div>

}

<!-- [!code classes:flow-root] -->
<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>

Flex#

Use the flex utility to create a block-level flex container:

{

Andrew Alfred Technical advisor
}

<!-- [!code classes:flex] -->
<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

Inline Flex#

Use the inline-flex utility to create an inline flex container that flows with text:

{

Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here.{" "} Kramer {" "} keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I just have to believe there's a way to make it work, there's simply too much opportunity here.

}

<!-- [!code classes:inline-flex] -->
<p>
  Today I spent most of the day researching ways to ...
  <span class="inline-flex items-baseline">
    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
    <span>Kramer</span>
  </span>
  keeps telling me there is no way to make it work, that ...
</p>

Grid#

Use the grid utility to create a grid container:

{ 

  </div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">01</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">02</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">03</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">04</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">05</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">06</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">07</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">08</div>
  <div className="relative rounded-lg bg-fuchsia-500 p-4">09</div>
</div>

}

<!-- [!code classes:grid] -->
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>

Inline Grid#

Use the inline-grid utility to create an inline grid container:

{ 

    </div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
  </div>
  <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
    <div className="absolute inset-0">

    </div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
    <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
  </div>
</div>

}

<!-- [!code classes:inline-grid] -->
<span class="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 class="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 the contents utility to create a "phantom" container whose children act like direct children of the parent:

{ 

  </div>
  <div className="relative flex-1 rounded-lg bg-purple-500 p-4">01</div>
  <div className="relative contents">
    <div className="relative flex-1 rounded-lg bg-purple-500 p-4">02</div>
    <div className="relative flex-1 rounded-lg bg-purple-500 p-4">03</div>
  </div>
  <div className="relative flex-1 rounded-lg bg-purple-500 p-4">04</div>
</div>

}

<!-- [!code classes:contents] -->
<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="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:

{

Song
Artist
Year
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
}

<!-- [!code classes:table,table-header-group,table-row-group,table-row,table-cell] -->
<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Witchy Woman</div>
      <div class="table-cell ...">The Eagles</div>
      <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>

Hidden#

Use the hidden utility to remove an element from the document:

{ 

  </div>
  <div className="hidden h-14 w-14 rounded-lg bg-purple-500 p-4">01</div>
  <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">02</div>
  <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">03</div>
</div>

}

<!-- [!code classes:hidden] -->
<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

To visually hide an element but keep it in the document, use the visibility property instead.

Screen-reader only#

Use sr-only to hide an element visually without hiding it from screen readers:

<!-- [!code classes:sr-only] -->
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers:

<!-- [!code classes:sm:not-sr-only] -->
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

This can be useful when you want to visually hide something on small screens but show it on larger screens for example.

Responsive design#