DocsBlogShowcasePlus
  1. Layout
  2. display

Layout

display

Utilidades para controlar el tipo de caja de visualización de un elemento.

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

Ejemplos

Block e Inline

Usa las utilidades inline, inline-block y block para controlar el flujo de texto y elementos:

Al controlar el flujo de texto, usar la propiedad CSS display: inline hará que el texto dentro del elemento se ajuste normalmente.

Mientras que usar la propiedad display: inline-block ajustará el elemento para evitar que el texto interior se extienda más allá de su padre.

Finalmente, usar la propiedad display: block colocará el elemento en su propia línea y llenará su padre.
<p>
  Al controlar el flujo de texto, usar la propiedad <span class="inline">display: inline</span> hará que el
  texto dentro del elemento se ajuste normalmente.
</p>
<p>
  Mientras que usar la propiedad <span class="inline-block">display: inline-block</span> ajustará el elemento para evitar que el
  texto interior se extienda más allá de su padre.
</p>
<p>
  Finalmente, usar la propiedad <span class="block">display: block</span> colocará el elemento en su propia línea y llenará su
  padre.
</p>

Flow Root

Usa la utilidad flow-root para crear un elemento a nivel de bloque con su propio contexto de formato de bloque:

Bueno, déjame decirte algo, chico gracioso. ¿Sabes ese pequeño sello, el que dice "Biblioteca Pública de Nueva York"? Bueno, puede que eso no signifique nada para ti, pero significa mucho para mí. Muchísimo.
Claro, adelante, ríete si quieres. He visto a gente como tú antes: Llamativos, haciéndose notar, desafiando las convenciones. Sí, sé lo que estás pensando. ¿Por qué este tipo hace tanto escándalo por unos viejos libros de biblioteca? Bueno, déjame darte una pista, jovencito.
<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Bueno, déjame decirte algo, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Claro, adelante, ríete si quieres...</div>
  </div>
</div>

Flex

Usa la utilidad flex para crear un contenedor flex a nivel de bloque:

Andrew AlfredAsesor técnico
<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Asesor técnico</span>
  </div>
</div>

Inline Flex

Usa la utilidad inline-flex para crear un contenedor flex en línea que fluya con el texto:

Hoy pasé la mayor parte del día investigando formas de aprovechar el hecho de que las botellas se pueden devolver por 10 centavos en Michigan, pero solo 5 centavos aquí. Kramer Kramer sigue diciéndome que no hay forma de hacerlo funcionar, que ha calculado los números de cada enfoque posible, pero simplemente tengo que creer que hay una forma de hacerlo funcionar, simplemente hay demasiada oportunidad aquí.

<p>
  Hoy pasé la mayor parte del día investigando formas de ...
  <span class="inline-flex items-baseline">
    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
    <span>Kramer</span>
  </span>
  sigue diciéndome que no hay forma de hacerlo funcionar, que ha calculado los números de cada enfoque posible,
  pero simplemente tengo que creer que hay una forma de hacerlo funcionar, simplemente hay demasiada oportunidad aquí.
</p>

Grid

Usa la utilidad grid para crear un contenedor grid:

01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>

Inline Grid

Usa la utilidad inline-grid para crear un contenedor grid en línea:

01
02
03
04
05
06
01
02
03
04
05
06
<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

Usa la utilidad contents para crear un contenedor "fantasma" cuyos hijos actúan como hijos directos del padre:

01
02
03
04
<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

Usa las utilidades table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group y table-footer-group para crear elementos que se comporten como sus respectivos elementos de tabla:

Canción
Artista
Año
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Canción</div>
      <div class="table-cell text-left ...">Artista</div>
      <div class="table-cell text-left ...">Año</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

Usa la utilidad hidden para eliminar un elemento del documento:

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

Para ocultar visualmente un elemento pero mantenerlo en el documento, usa la propiedad visibility en su lugar.

Solo para lectores de pantalla

Usa sr-only para ocultar un elemento visualmente sin ocultarlo de los lectores de pantalla:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Configuración</span>
</a>

Usa not-sr-only para deshacer sr-only, haciendo que un elemento sea visible tanto para usuarios videntes como para lectores de pantalla:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Configuración</span>
</a>

Esto puede ser útil cuando quieres ocultar algo visualmente en pantallas pequeñas pero mostrarlo en pantallas más grandes, por ejemplo.

Responsive design

Prefija una utilidad display con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

En esta página

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada