Posicionamiento y diseño responsive¶

En este documento veremos qué opciones ofrece Tailwind para posicionar los elementos en la página y ofrecer diseños responsive.

1. Posicionamiento de elementos¶

Veremos, para empezar, algunos selectores de posicionamiento en Tailwind.

1.1. Selectores de posicionamiento básico¶

Comenzaremos por los selectores que permiten definir opciones de posicionamiento básico: flotabilidad, posición, etc.

Para controlar el modo en que se muestran las componentes (propiedad display en CSS), se tienen los selectores de clase inline, block, flex, grid o hidden. Este último sería equivalente a display:none.
Para controlar la flotabilidad (propiedad float de CSS) se tienen los selectores float-* o clear-*, pudiendo completarse con los elementos habituales de CSS (ejemplos: float-left, clear-both).
Para controlar la posición del elemento en la página (propiedad position de CSS) se tienen los selectores static, relative, absolute, fixed, sticky.
También podemos indicar la distancia a puntos de referencia, como por ejemplo, bottom-0, o left-1. Si indicamos un signo negativo antes, el desplazamiento es en sentido contrario. Por ejemplo, -left-1 se desplaza hacia la izquierda desde el borde izquierdo.

Aquí vemos un ejemplo de uso de algunas de estas propiedades:

<div class="grid">
  <div class="hidden">Oculto</div>
  <div class="fixed bottom-0 left-0">Fijo</div>
  <div class="float-left">Izquierda</div>
</div>

Ejercicio 1

Con los selectores vistos en este apartado, trata de crear una página con estas cajas:

La primera caja tiene fondo azul, borde gris continuo de 2 píxeles de grosor por todo el contorno y margen derecho e inferior de 10 píxeles. Debe tener una anchura del 50% y una altura de 100 píxeles.
La segunda caja tiene fondo amarillo claro, sin borde. Debe tener una anchura del 20% y una altura de 50 píxeles.
La tercera caja debe tener fondo rojo claro, con borde negro doble de 1 píxel de grosor. Debe tener una anchura del 20% y una altura de 50 píxeles.
Las tres cajas deben tener un posicionamiento flotante a la izquierda, pero la tercera debe tener una propiedad clear para estar alineada con el margen izquierdo.

1.2. Uso de flex y grid¶

Tailwind comparte muchos selectores de clase que son válidos tanto para distribuciones con flex como con grid, y también otros que son exclusivos de uno de estos dos modelos. Aquí puedes consultar la documentación al respecto, y a continuación analizamos algunos de los más relevantes.

1.2.1. Selectores específicos de flex¶

Los selectores flex o inline-flex preparan un contenedor general para uso de flex. Además, en ese contenedor general podemos indicar otras opciones:

La dirección de distribución de los elementos la especificamos con flex-row (valor por defecto), flex-col, flex-row-reverse o flex-col-reverse.
Para permitir que los elementos se auto-ajusten y pasen a la siguiente fila/columna si no hay espacio tenemos flex-wrap o flex-wrap-reverse.

En los elementos internos al contenedor podemos aplicar otros selectores adicionales:

El tamaño inicial se controla con el selector basis. Podemos especificar el tamaño en unidades numéricas (basis-2), fracciones, unidades categóricas (basis-3xl) y otros predefinidos como basis-full (100% de anchura disponible) o basis-auto.
grow y shrink para permitir que ese elemento crezca o encoja, respectivamente. Si no indicamos tamaño, se tiene un crecimiento normal (valor 1), pero podemos indicar otros factores de crecimiento/encogimiento como por ejemplo grow-2, o evitar que crezcan (grow-0). También podemos indicar otras unidades, como grow-[25vw].
flex-[número] para indicar un ritmo de crecimiento y encogimiento simultáneo. Admite las mismas variantes que el anterior, y alguno más como fracciones, o flex-auto (permite crecer y encoger), flex-initial (encoger pero no crecer, desde su tamaño inicial) o flex-none (no permite crecer ni encoger).

1.2.2. Selectores específicos de grid¶

El selector grid establece el contenedor principal como de tipo grid. Además, podemos incluir estos otros específicos en dicho contenedor para configurar la rejilla:

grid-cols para indicar las columnas. Admite modificadores como grid-cols-{número}, modificadores habituales entre corchetes como grid-cols-[repeat(auto-fill,minmax(160px,1fr))], y otros que se pueden consultar en la documentación oficial
Las filas se pueden establecer con grid-rows, indicando un número (grid-rows-3) y otras opciones adicionales.
Para controlar cómo se auto-ubican los elementos en la rejilla tenemos las opciones grid-flow-row, grid-flow-col, grid-flow-dense (para hacer que se rellenen los huecos)...
El tamaño de las filas o columnas añadidas implícitamente se controla con auto-cols, con valores como auto-cols-auto, auto-cols-min... Y lo mismo con auto-rows.

Por otra parte, en cada elemento de la rejilla podemos emplear estos otros modificadores:

Las casillas o columnas que ocupa un elemento se especifican con col-span, indicando un número normalmente (col-span-2). También podemos indicar con col-start-{número} y col-end-{número} el inicio y fin de la casilla, como en grid.
Las filas que ocupa el elemento se especifican con row-span. Además, también tenemos disponibles row-start y row-end, todas con las mismas opciones que el caso anterior para columnas.
La alineación de los elementos a lo largo del eje interno de los elementos se controla con los selectores justify-items-start, justify-items-end, justify-items-center... Esto alinea los elementos en cada casilla de la rejilla.

1.2.3. Selectores comunes¶

Tanto flex como grid comparten una serie de selectores comunes que podemos aplicar en ambos casos:

El espaciado entre elementos se define con gap, y una unidad numérica (ejemplo: gap-4). También podemos indicar por separado gap-x-{número} y gap-y-{número}.
El justificado de los elementos en el eje principal se define con los selectores justify-start, justify-end, justify-center, justify-between, justify-around... similares a los originales de CSS.
El justificado de los elementos en el eje secundario se define con items-start, items-end, items-center...

Ejercicio 2

Trata de replicar ahora esta web usando grid para las distintas cajas que aparecen. El color de borde y fondo es azul.

Ejercicio 3

Vamos ahora con este ejemplo. Modifícalo usando los selectores de flex de Tailwind para que:

Las dos cajas centrales ocupen el doble de tamaño que las laterales. Las laterales van a tener un color de fondo gris y las centrales amarillo-naranja.
Las cajas laterales tengan una anchura mínima de 200px, y las centrales de 300px. Cuando este tamaño no sea posible, se redistribuirán

Aquí tienes un ejemplo de cómo puede quedar, a algunas de las resoluciones posibles:

2. Diseño responsive¶

Igual que ocurre con otros frameworks como Bootstrap, Tailwind dispone de ciertos selectores para definir diseños responsive que se adaptan automáticamente a distintos tamaños de pantalla. Además, comparte con Bootstrap la nomenclatura de muchos de estos selectores (breakpoints):

Breakpoint	Tamaño pantalla
`sm`	40rem (640px)
`md`	48rem (768px)
`lg`	64rem (1024px)
`xl`	80rem (1280px)
`2xl`	96rem (1536px)

Igual que Boostrap, Tailwind utiliza la filosofía mobile first, lo que significa que estos breakpoints deben interpretarse como tamaños "a partir de". Así, la idea es definir un estilo básico para pantallas pequeñas y luego incluir los modificadores para tamaños superiores. También es posible establecer un rango de tamaños con los dos puntos :. Aquí vemos algunos ejemplos:

<!-- 4 columnas en pantallas xl o superiores -->
<div class="grid-cols-2 xl:grid-cols-4">...</div>

<!-- 3 columnas en pantallas entre md y xl-->
<div class="grid-cols-2 md:xl:grid-cols-3">...</div>

2.1. Container queries¶

Tailwind también permite definir comportamientos dependientes del tamaño de un elemento contenedor. Esto puede resultar útil para mostrar u ocultar ciertos paneles dependiendo del tamaño del contenedor en pantalla.

Para hacer esto debemos añadir el selector @container en el contenedor que queramos, y luego dentro usar los breakpoints anteriores con una arroba delante @, para indicar que se refieren al tamaño del contenedor asociado.

<section class="@container">
  <div class=" grid grid-cols-2 @lg:grid-cols-3">
    ...
  </div>
</section>

Ejercicio 4

Repite el ejercicio anterior usando breakpoints para que las cajas se muestren en tres distribuciones distintas, todas con el mismo color de fondo y tamaño:

Las cuatro cajas una junto a otra en dispositivos tamaño lg o superior
Las cajas se muestren de dos en dos en tamaño md
Las cajas se muestren una bajo la otra en dispositivos más pequeños

Ejercicio 5

Utiliza los selectores que hemos visto hasta aquí de Tailwind para construir una página como esta que se ha planteado en un ejercicio de Bootstrap. Las tarjetas deben mostrarse en 4 columnas en pantallas lg o superior, o en 1 columna en tamaños inferiores.

2.2. Menús colapsables¶

Una característica muy útil de Bootstrap es la facilidad para crear barras de navegación (navbars) con menús colapsables a partir de cierto tamaño de pantalla. En Tailwind este diseño se plantea de forma diferente.

Por una parte, el menú visible en tamaños grandes se puede mostrar con distribución flex:

<div class="hidden lg:flex items-center gap-6 ...">
  <a href="...">Menú 1</a>
  <a href="...">Menú 2</a>
  <a href="...">Menú 3</a>
</div>

Por otra parte, el botón de hamburguesa y el menú alternativo que se mostrará cuando la pulsemos aparecerán ocultos (hidden) en tamaños lg o superiores:

<!-- Botón hamburguesa -->
<button class="lg:hidden text-gray-600" id="menu-btn">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
</button>

...

<!-- Menú asociado al botón hamburguesa -->
<div class="hidden absolute top-full left-0 w-full bg-white border-b shadow-lg flex-col p-4 lg:hidden" id="mobile-menu">
  <a href="...">Menú 1</a>
  <a href="...">Menú 2</a>
  <a href="...">Menú 3</a>
</div>

Finalmente, podemos añadir un pequeño código JavaScript para alternar hidden y flex cuando toque:

<script>
    const btn = document.getElementById('menu-btn');
    const menu = document.getElementById('mobile-menu');

    btn.addEventListener('click', () => {
        menu.classList.toggle('hidden');
        menu.classList.toggle('flex');
    });
</script>

Ejercicio 6

Crea una página que muestre un menú de navegación como este usando Tailwind, que se colapse en pantallas inferiores a lg:

Ayuda

Para conseguir el icono de la campana, puedes incluir el siguiente código SVG:

<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>