Tailwind CSS y los diseños Flexbox y Grid

Tailwind CSS proporciona poderosas clases de utilidad para gestionar diseños, especialmente Flexbox y Grid.

Estas clases de utilidad de Flexbox y Grid te permiten crear diseños receptivos y flexibles de manera muy eficiente, sin necesidad de escribir CSS personalizado.

La filosofía de Tailwind CSS es controlar el diseño mediante clases de utilidad de bajo nivel (utility-first), combinando clases de manera flexible para satisfacer diferentes necesidades de diseño.

1. Diseño Flexbox

Flexbox es un modo de diseño que ayuda a los desarrolladores a crear diseños unidimensionales (horizontales o verticales).

Tailwind CSS ofrece varias clases de utilidad concisas para controlar todos los aspectos del diseño Flexbox, incluyendo dirección, alineación, flexibilidad, etc.

Configurar el contenedor Flex

Para crear un diseño Flexbox, primero debes establecer el elemento como contenedor flex.

Ejemplo

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Pruébalo »

flex establece la propiedad display del elemento como flex, es decir, habilita el diseño Flexbox.

Clases de utilidad para el tamaño inicial de los elementos flex y sus propiedades CSS correspondientes:

Nombre de clase de TailwindPropiedad y valor CSSDescripción
basis-0flex-basis:0px;Establece el tamaño base del elemento flex en 0px.
basis-1flex-basis:0.25rem;Establece el tamaño base del elemento flex en 4px.
basis-2flex-basis:0.5rem;Establece el tamaño base del elemento flex en 8px.
basis-3flex-basis:0.75rem;Establece el tamaño base del elemento flex en 12px.
basis-4flex-basis:1rem;Establece el tamaño base del elemento flex en 16px.
basis-5flex-basis:1.25rem;Establece el tamaño base del elemento flex en 20px.
basis-6flex-basis:1.5rem;Establece el tamaño base del elemento flex en 24px.
basis-7flex-basis:1.75rem;Establece el tamaño base del elemento flex en 28px.
basis-8flex-basis:2rem;Establece el tamaño base del elemento flex en 32px.
basis-9flex-basis:2.25rem;Establece el tamaño base del elemento flex en 36px.
basis-10flex-basis:2.5rem;Establece el tamaño base del elemento flex en 40px.
basis-11flex-basis:2.75rem;Establece el tamaño base del elemento flex en 44px.
basis-12flex-basis:3rem;Establece el tamaño base del elemento flex en 48px.
basis-14flex-basis:3.5rem;Establece el tamaño base del elemento flex en 56px.
basis-16flex-basis:4rem;Establece el tamaño base del elemento flex en 64px.
basis-20flex-basis:5rem;Establece el tamaño base del elemento flex en 80px.
basis-24flex-basis:6rem;Establece el tamaño base del elemento flex en 96px.
basis-28flex-basis:7rem;Establece el tamaño base del elemento flex en 112px.
basis-32flex-basis:8rem;Establece el tamaño base del elemento flex en 128px.
basis-36flex-basis:9rem;Establece el tamaño base del elemento flex en 144px.
basis-40flex-basis:10rem;Establece el tamaño base del elemento flex en 160px.
basis-44flex-basis:11rem;Establece el tamaño base del elemento flex en 176px.
basis-48flex-basis:12rem;Establece el tamaño base del elemento flex en 192px.
basis-52flex-basis:13rem;Establece el tamaño base del elemento flex en 208px.
basis-56flex-basis:14rem;Establece el tamaño base del elemento flex en 224px.
basis-60flex-basis:15rem;Establece el tamaño base del elemento flex en 240px.
basis-64flex-basis:16rem;Establece el tamaño base del elemento flex en 256px.
basis-72flex-basis:18rem;Establece el tamaño base del elemento flex en 288px.
basis-80flex-basis:20rem;Establece el tamaño base del elemento flex en 320px.
basis-96flex-basis:24rem;Establece el tamaño base del elemento flex en 384px.
basis-autoflex-basis:auto;Establece el tamaño base del elemento flex en automático.
basis-pxflex-basis:1px;Establece el tamaño base del elemento flex en 1px.
basis-0.5flex-basis:0.125rem;Establece el tamaño base del elemento flex en 2px.
basis-1.5flex-basis:0.375rem;Establece el tamaño base del elemento flex en 6px.
basis-2.5flex-basis:0.625rem;Establece el tamaño base del elemento flex en 10px.
basis-3.5flex-basis:0.875rem;Establece el tamaño base del elemento flex en 14px.
basis-1/2flex-basis:50%;Establece el tamaño base del elemento flex en la mitad del ancho del contenedor.
basis-1/3flex-basis:33.333333%;Establece el tamaño base del elemento flex en un tercio del ancho del contenedor.
basis-2/3flex-basis:66.666667%;Establece el tamaño base del elemento flex en dos tercios del ancho del contenedor.
basis-1/4flex-basis:25%;Establece el tamaño base del elemento flex en un cuarto del ancho del contenedor.
basis-2/4flex-basis:50%;Establece el tamaño base del elemento flex en la mitad del ancho del contenedor.
basis-3/4flex-basis:75%;Establece el tamaño base del elemento flex en tres cuartos del ancho del contenedor.
basis-1/5flex-basis:20%;Establece el tamaño base del elemento flex en un quinto del ancho del contenedor.
basis-2/5flex-basis:40%;Establece el tamaño base del elemento flex en dos quintos del ancho del contenedor.
basis-3/5flex-basis:60%;Establece el tamaño base del elemento flex en tres quintos del ancho del contenedor.
basis-4/5flex-basis:80%;Establece el tamaño base del elemento flex en cuatro quintos del ancho del contenedor.
basis-1/6flex-basis:16.666667%;Establece el tamaño base del elemento flex en un sexto del ancho del contenedor.
basis-2/6flex-basis:33.333333%;Establece el tamaño base del elemento flex en dos sextos del ancho del contenedor.
basis-3/6flex-basis:50%;Establece el tamaño base del elemento flex en dos tercios del ancho del contenedor.
basis-4/6flex-basis:66.666667%;Establece el tamaño base del elemento flex en cuatro sextos del ancho del contenedor.
basis-5/6flex-basis:83.333333%;Establece el tamaño base del elemento flex en cinco sextos del ancho del contenedor.
basis-1/12flex-basis:8.333333%;Establece el tamaño base del elemento flex en 8.33%.
basis-2/12flex-basis:16.666667%;Establece el tamaño base del elemento flex en 16.67%.
basis-3/12flex-basis:25%;Establece el tamaño base del elemento flex en 25%.
basis-4/12flex-basis:33.333333%;Establece el tamaño base del elemento flex en 33.33%.
basis-5/12flex-basis:41.666667%;Establece el tamaño base del elemento flex en 41.67%.
basis-6/12flex-basis:50%;Establece el tamaño base del elemento flex en 50%.
basis-7/12flex-basis:58.333333%;Establece el tamaño base del elemento flex en 58.33%.
basis-8/12flex-basis:66.666667%;Establece el tamaño base del elemento flex en 66.67%.
basis-9/12flex-basis:75%;Establece el tamaño base del elemento flex en 75%.
basis-10/12flex-basis:83.333333%;Establece el tamaño base del elemento flex en 83.33%.
basis-11/12flex-basis:91.666667%;Establece el tamaño base del elemento flex en 91.67%.
basis-fullflex-basis:100%;Establece el tamaño base del elemento flex en 100%.

Ejemplo

<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/4">02</div>
  <div class="basis-1/2">03</div>
</div>

Pruébalo »

Dirección Flex

flex-direction controla la dirección del eje principal (es decir, la dirección en la que se ordenan los elementos dentro del contenedor Flex).

Tailwind proporciona las siguientes clases de utilidad para establecer la dirección:

  • flex-row: Valor predeterminado, los elementos secundarios se organizan horizontalmente de izquierda a derecha.
  • flex-row-reverse: Los elementos secundarios se organizan horizontalmente de derecha a izquierda.
  • flex-col: Los elementos secundarios se organizan verticalmente de arriba hacia abajo.
  • flex-col-reverse: Los elementos secundarios se organizan verticalmente de abajo hacia arriba.

Ejemplo

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

<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

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

Pruébalo »

Flex Wrap (ajuste de línea)

De forma predeterminada, los elementos en un contenedor Flexbox se ordenan en una sola línea.

Si deseas que se ajusten a varias líneas, puedes usar la clase de utilidad flex-wrap.

  • flex-wrap: Permite que los elementos se ajusten a varias líneas.
  • flex-nowrap: Evita que los elementos se ajusten a varias líneas.
  • flex-wrap-reverse: Ajuste de línea inverso.

Ejemplo

<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Pruébalo »

Flexibilidad de los elementos Flex

Flexbox permite que el tamaño de los elementos se expanda o se contraiga según el espacio disponible.

Tailwind CSS proporciona las siguientes clases de utilidad para controlar la flexibilidad:

Nombre de clase de TailwindPropiedad y valor CSSDescripción
flex-1flex: 1 1 0%;Hace que los elementos flex tengan la misma capacidad de crecimiento y contracción, con un tamaño base de 0%, comúnmente usado para crear diseños flex de igual ancho o igual altura.
flex-autoflex: 1 1 auto;Hace que los elementos flex tengan un tamaño base automático y la misma capacidad de crecimiento y contracción, comúnmente usado para que los elementos flex llenen el espacio adicional.
flex-initialflex: 0 1 auto;Hace que los elementos flex tengan un tamaño base automático, no crezcan pero puedan contraerse, para mantener el tamaño natural del elemento a menos que el espacio sea insuficiente.
flex-noneflex: none;Evita que los elementos flex crezcan o se encojan, manteniendo su tamaño base, comúnmente usado para fijar el tamaño de los elementos.

Ejemplo

<div class="flex">
  <div class="flex-none w-14 ...">
    01
  </div>
  <div class="flex-initial w-64 ...">
    02
  </div>
  <div class="flex-initial w-32 ...">
    03
  </div>
</div>


<div class="flex">
  <div class="flex-none w-14 ...">
    01
  </div>
  <div class="flex-1 w-64 ...">
    02
  </div>
  <div class="flex-1 w-32 ...">
    03
  </div>
</div>


Pruébalo »

Propiedad flex-grow

Las siguientes son clases de utilidad que controlan la propiedad flex-grow de los elementos flex y sus propiedades CSS correspondientes:

Nombre de clase de TailwindPropiedad y valor CSSDescripción
growflex-grow: 1;Permite que el elemento flex crezca para llenar el espacio adicional, con una proporción de crecimiento de 1.
grow-0flex-grow: 0;Evita que el elemento flex crezca para llenar el espacio adicional, con una proporción de crecimiento de 0.

Ejemplo

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="grow h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Pruébalo »

Propiedad flex-shrink

Las siguientes son clases de utilidad que controlan la propiedad flex-shrink de los elementos flex y sus propiedades CSS correspondientes:

Nombre de clase de TailwindPropiedad y valor CSSDescripción
shrinkflex-shrink: 1;Permite que el elemento flex se encoja cuando sea necesario para ajustarse al contenedor flex, con una proporción de contracción de 1.
shrink-0flex-shrink: 0;Evita que el elemento flex se encoja cuando sea necesario para ajustarse al contenedor flex, con una proporción de contracción de 0.

Ejemplo

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="shrink w-64 h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Pruébalo »

Orden

Las siguientes son clases de utilidad para controlar el orden de los elementos flex o grid y sus propiedades CSS correspondientes:

Nombre de clase de TailwindPropiedad y valor CSSDescripción
order-1order: 1;Establece el orden del elemento flex o grid a 1.
order-2order: 2;Establece el orden del elemento flex o grid a 2.
order-3order: 3;Establece el orden del elemento flex o grid a 3.
order-4order: 4;Establece el orden del elemento flex o grid a 4.
order-5order: 5;Establece el orden del elemento flex o grid a 5.
order-6order: 6;Establece el orden del elemento flex o grid a 6.
order-7order: 7;Establece el orden del elemento flex o grid a 7.
order-8order: 8;Establece el orden del elemento flex o grid a 8.
order-9order: 9;Establece el orden del elemento flex o grid a 9.
order-10order: 10;Establece el orden del elemento flex o grid a 10.
order-11order: 11;Establece el orden del elemento flex o grid a 11.
order-12order: 12;Establece el orden del elemento flex o grid a 12.
order-firstorder: -9999;Establece el orden del elemento flex o grid al principio.
order-lastorder: 9999;Establece el orden del elemento flex o grid al final.
order-noneorder: 0;Establece el orden del elemento flex o grid al orden predeterminado, es decir, no cambia su orden.

Ejemplo

<div class="flex justify-between ...">
  <div class="order-last">01</div>
  <div>02</div>
  <div>03</div>
</div>

Pruébalo »

Diseño Grid (cuadrícula)

Grid es otro modelo de diseño que te permite posicionar elementos con precisión en filas y columnas, y crear fácilmente diseños complejos.

Tailwind CSS proporciona potentes clases de utilidad para manejar el diseño de cuadrícula.

Las siguientes son clases de utilidad en Tailwind CSS para especificar el número de columnas en un diseño de cuadrícula y sus propiedades CSS correspondientes:

Nombre de clase de TailwindPropiedad y valor CSSDescripción
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));Crea un diseño de cuadrícula con 1 columna.
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));Crea un diseño de cuadrícula con 2 columnas.
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));Crea un diseño de cuadrícula con 3 columnas.
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));Crea un diseño de cuadrícula con 4 columnas.
grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));Crea un diseño de cuadrícula con 5 columnas.
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));Crea un diseño de cuadrícula con 6 columnas.
grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));Crea un diseño de cuadrícula con 7 columnas.
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));Crea un diseño de cuadrícula con 8 columnas.
grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));Crea un diseño de cuadrícula con 9 columnas.
grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));Crea un diseño de cuadrícula con 10 columnas.
grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));Crea un diseño de cuadrícula con 11 columnas.
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));Crea un diseño de cuadrícula con 12 columnas.
grid-cols-nonegrid-template-columns: none;No crea columnas de cuadrícula; los elementos secundarios no utilizarán el diseño de cuadrícula.
grid-cols-subgridgrid-template-columns: subgrid;Utiliza un diseño de subcuadrícula; los elementos secundarios heredarán la definición de columnas de la cuadrícula principal.

Ejemplo

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

Pruébalo »
  • grid: Habilita el diseño Grid.
  • grid-cols-{n}: Establece el número de columnas de la cuadrícula.
  • gap-{size}: Establece el espacio entre columnas y filas.

Filas y columnas de Grid

Mediantegrid-template-columnsygrid-template-rowscontrolas el ancho y alto de columnas y filas. Tailwind proporciona las siguientes clases de utilidad para controlar:

  • grid-cols-{n}: Establece el número de columnas de la cuadrícula (por ejemplo,grid-cols-3representa tres columnas).
  • grid-rows-{n}: Establece el número de filas de la cuadrícula (por ejemplo,grid-rows-2representa dos filas).
  • col-span-{n}: Establece cuántas columnas ocupa un elemento.
  • row-span-{n}: Establece cuántas filas ocupa un elemento.

Ejemplo

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-cols-subgrid gap-4 col-span-3">
    <div class="col-start-2">06</div>
  </div>
</div>

Pruébalo »

Ejemplo

<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>

Pruébalo »

Ejemplo

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="row-span-2 col-span-2 ...">03</div>
</div>

Pruébalo »

Posicionamiento de los elementos Grid

grid-column y grid-row controlan la posición de cada elemento en la cuadrícula.

Puedes especificarlo mediante las siguientes clases de utilidad:

  • col-start-{n}: Establece que el elemento comience en la columna n.
  • col-end-{n}: Establece que el elemento termine en la columna n.
  • row-start-{n}: Establece que el elemento comience en la fila n.
  • row-end-{n}: Establece que el elemento termine en la fila n.

Ejemplo

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-end-7 col-span-2 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>

Pruébalo »

Ejemplo

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2 ...">01</div>
  <div class="row-end-3 row-span-2 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>

Pruébalo »

Alineación y distribución

Al igual que Flexbox, Grid también ofrece opciones de alineación y distribución.

La propiedad justify-content se utiliza para alinear los elementos secundarios dentro del contenedor a lo largo del eje principal (dirección horizontal).

Nombre de clase de TailwindPropiedad y valor CSSDescripción
justify-normaljustify-content: normal;Utiliza la alineación predeterminada, generalmente equivalente astart。
justify-startjustify-content: flex-start;Mueve todos los elementos secundarios al inicio del contenedor. En un diseño horizontal, los elementos se alinean a la izquierda.
justify-endjustify-content: flex-end;Mueve todos los elementos secundarios al final del contenedor. En un diseño horizontal, los elementos se alinean a la derecha.
justify-centerjustify-content: center;Centra todos los elementos secundarios.
justify-betweenjustify-content: space-between;Distribuye el espacio uniformemente entre los elementos secundarios, sin dejar espacio en los extremos.
justify-aroundjustify-content: space-around;Distribuye el espacio uniformemente entre los elementos secundarios, dejando la mitad del espacio en los extremos.
justify-evenlyjustify-content: space-evenly;Distribuye el espacio de manera totalmente uniforme entre los elementos secundarios, incluido el espacio en los extremos.
justify-stretchjustify-content: stretch;Los elementos secundarios se estiran para llenar el contenedor, ocupando cada uno el mismo espacio.

Ejemplo

<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Pruébalo »

Otras configuraciones de alineación:

  • justify-items: Controla la alineación del contenido de las celdas de la cuadrícula.
  • justify-self: Controla la alineación de un solo elemento de la cuadrícula.
  • align-items: Controla la alineación vertical de las celdas de la cuadrícula.
  • align-self: Controla la alineación vertical de un solo elemento de la cuadrícula.

Ejemplo

<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Pruébalo »
Otras extensiones