Una de las ventajas que nos ofrece Tailwind consiste en diseñar de modo adaptable sin tener que lidiar con las mediaqueries de CSS. No es que las mediaquieres sean difíciles, pero sí que agregan algo de dificultad al CSS básico y ajustarlas bien a veces ralentiza algo el flujo de desarrollo de un sitio web.

Tailwind soluciona el diseño adaptable por medio de clases de utilidad. Encontramos toda una serie de clases que nos permiten realizar el diseño adaptable o también "diseño responsive" como le solemos llamar.

En este artículo del Manual de TailwindCSS vamos a abordar todos los detalles sobre el diseño responsive, tal como lo hacemos usando este framework CSS.

Mobile first

Antes de ver cuáles son las clases que Tailwind nos ofrece para realizar el diseño adaptable, vamos a centrarnos en explicar un concepto aplicado en el desarrollo de Tailwind: "Mobile first".

Mobile First no es algo específico de Tailwind, sino es una manera de trabajar que aporta orden en la definición de un diseño y al desarrollo de la adaptabilidad a todas las pantallas. Por tanto, es algo más conceptual, que te puede ayudar a ti como desarrollador, para ser más ordenado y sistemático a la hora de desarrollar el responsive.

En Mobile First primero vamos a especificar los estilos pensando en móviles con pantallas pequeñas. Una vez tengamos un diseño que encaje bien en las anchuras reducidas de los dispositivos móviles vamos a ir pensando en pantallas cada vez mayores. Cuando el diseño se ve de manera fea para ciertas dimensiones, aplicaremos estilos para mejorarlo. Así hasta llegar a los monitores de grandes dimensiones de los ordenadores de sobremesa.

En el fondo, es algo tan sencillo como que al diseñar nos vamos a centrar primeramente en aplicar los estilos para los móviles y, a medida que apliquemos clases de Tailwind, iremos modificando los estilos desde un tamaño de pantalla dado hacia todos los superiores.

• Si no indicamos ninguna clase de utilidad de diseño adaptable, los estilos se aplicarán a todas las pantallas
• Si aplicamos una clase responsive, con alguna de las clases de utilidad de Tailwind, entonces aplicará ese estilo a ciertas dimensiones de pantalla y todas las pantallas de dimensiones superiores a esa. Es decir, una clase responsive afecta a una dimensión de pantalla y a todas las superiores.

Por ejemplo, si defino un estilo para pantallas medianas, este estilo aplicará a pantallas medianas, grandes y extra-grandes, pero no a las pantallas pequeñas.

Dimensiones de pantallas definidas de manera predeterminada en Tailwind

Tenemos definidas varias dimensiones de pantallas en Tailwind de manera predeterminada. Los nombres de las clases para cada una de estas dimensiones son los siguientes:

• sm: Aplica a pantallas con dimensiones de 640 px para arriba.
• md: Para pantallas con dimensiones de 768 px en adelante.
• lg: Aplica a pantallas grandes, que comienzan en 1024 px.
• xl: Son para las pantallas muy grandes, que comienzan en 1280 px. 2xl: Este estilo afecta a pantallas de 1536 px y superiores.

Por medio de la definición de nuestro propio tema personalizado estas medidas se pueden cambiar, así como podríamos definir estilos para tamaños intermedios de pantallas. Este tema lo veremos más adelante. Así como también sería posible cambiar el nombre de estas clases a nombres como "tablet", "desktop", etc. En este punto del manual no vamos a abordar configuración todavía, pero más adelante lo explicaremos.

Aplicación de clases responsive

Los nombres de clases responsive, como "sm", "md", etc. se combinan con cualquier otra clase del framework para generar clases como estas: "sm:text-center", "lg:font-bold" o "md:text-xl". Estas clases son las mismas que conocemos para centrar o cambiar el tamaño del texto, pero restringidas a determinadas dimensiones de pantallas. Por ejemplo:

• sm:text-center hará que ese elemento tenga el texto centrado en dimensiones superiores a 640 px.
• lg:font-bold hará que el texto aparezca en negrita cuando la pantalla tenga 1024 px o más

Podemos poner todas las clases responsive que sean necesarias en un elemento:

<h2 class="text-lg md:text-xl xl:text-2xl">Encabezado</h2>

Este encabezado tendrá tengo grande en todas las pantallas (text-lg), pero en pantallas medianas para arriba se ampliará a extra-large (md:text-xl) y ya en pantallas super grandes será de dos extra-large (xl:text-2xl)

Las clases responsive las podemos mezclar de todas las maneras posibles. Algo muy típico es mostrar u ocultar elementos según las dimensiones de la pantalla.

<div class="hidden md:block">Ocultar en pequeño y mostrar de mediano para arriba</div>

Esa división solamente se verá en pantallas de 768 px en adelante. Como puedes ver, el estilo sin modificadores responsive siempre se aplica "mobile first" y a continuación lo modificamos con los estilos necesarios para pantallas grandes.

Ejemplo de contenido responsive

En la documentación de Tailwind hay buenos ejemplos de elementos responsive que puedes tomar en cuenta para aprender muchos usos interesantes de sus clases de utilidad. Yo voy a hacer algo muy sencillo donde ver algunas clases en funcionamiento y practicar con ellas, a la vez que conocemos alguna otra alternativa para hacer diseño adaptable.

<div class="max-w-md p-4 mx-auto mt-4 bg-gray-200 sm:shadow-md sm::rounded-md sm:bg-gray-100 sm:p-6 md:bg-green-100">
  <h2 class="text-lg font-semibold text-center text-blue-500 sm:text-xl">Me adapto a todo</h2>
  <p class="mt-3 text-gray-600">Esta caja es adaptable. Diseño primero para las dimensiones pequeñas y voy aumentando para las grandes.</p>
</div>

Este bloque es un bloque adaptable, en el sentido que si es muy pequeño se muestra sin márgenes ni nada, al 100% del espacio disponible. En el momento que hay más espacio en la página el bloque se muestra como una tarjeta, con los bordes redondeados y una sombra.

Tiene una propiedad que no habíamos visto hasta ahora que es "max-w-md" que sirve para asignar una anchura máxima a este elemento (max-w = max-width), en este caso de tamaño "md", lo que equivale a 448 píxeles (28 rem). El color de fondo de la caja también cambia a medida que la anchura de la pantalla va creciendo.

Ya dentro tenemos un titular H2 cuyo texto aumenta de tamaño si la anchura de la página es de 640 px o superior.

Conclusión

El diseño responsive resulta bastante sencillo en Tailwind CSS, pero sobretodo ofrece un flujo de desarrollo muy ágil para el desarrollador.

Aplicar clases responsive permite que podamos definir de una manera super rápida el estilo para cada tipo de dispositivo y además nos obliga a trabajar siempre con mobile first, lo que hará que nuestras prácticas sean muy sistemáticas y ordenadas.