Compárala con la versión en CSS de el menú de lista a barra:
son las mismas propiedades. La <ul> no necesita list-none ni p-0 porque Tailwind
ya les quitó las viñetas y el relleno a las listas.
Grid con clases
Clase
CSS
grid
display: grid
grid-cols-3
grid-template-columns: repeat(3, 1fr), tres columnas iguales
gap-6
gap: 1.5rem
col-span-2
grid-column: span 2 (en el hijo: ocupa dos columnas)
Deja 16 px a los lados, para que en el teléfono el texto no toque el borde
Usa el mismo contenedor en todas las vistas
Si <main>, la navbar y el pie usan el mismo max-w-5xl px-4, sus bordes quedan
alineados en las tres vistas. Es de las cosas que más hacen que un sitio “se vea
ordenado” sin que nadie sepa decir por qué.
Diseño responsivo: móvil primero
Una página responsiva se reacomoda según el ancho de la pantalla: en el teléfono
las tarjetas van una bajo otra, y en el computador van en fila.
Tailwind lo resuelve con prefijos de tamaño, y la regla es una sola.
Sin prefijo, para todas; con prefijo, desde ese ancho
Las clases sin prefijo valen en todas las pantallas, empezando por el teléfono.
Un prefijo como md: agrega o cambia algo desde ese ancho hacia arriba.
Se lee así: una columna siempre y, desde 768 px, tres columnas.
La misma grilla en dos anchos
flowchart LR
subgraph T["teléfono"]
direction TB
A1["A"] ~~~ B1["B"] ~~~ C1["C"]
end
subgraph D["desde md"]
direction LR
A2["A"] ~~~ B2["B"] ~~~ C2["C"]
end
T ~~~ D
md: no significa "solo en tablet"
Significa “desde 768 px en adelante”: en un computador también se aplica. Si
quieres algo solo en el teléfono, lo escribes sin prefijo y lo cambias desde
md:. Por eso se dice “móvil primero”: se diseña el teléfono y después se agregan
los cambios para las pantallas más grandes.
Patrones que vas a usar
Clases
En el teléfono
Desde md:
flex flex-col md:flex-row
Uno bajo otro
En fila
grid grid-cols-1 md:grid-cols-3
Una columna
Tres columnas
text-2xl md:text-4xl
Título mediano
Título grande
hidden md:block
No se muestra
Se muestra
w-full md:w-1/2
Todo el ancho
La mitad del ancho
Sin la meta viewport, nada de esto funciona
Sin <meta name="viewport" content="width=device-width, initial-scale=1.0">, el
teléfono finge una pantalla de escritorio de unos 980 px. Como 980 es más que 768,
siempre se aplican las clases md:, y el teléfono muestra la versión de
computador en miniatura.
Prueba en el modo dispositivo del inspector
Abre el inspector (F12) y activa el modo dispositivo con Ctrl + Shift + M.
Revisa la página en tres anchos: 375 px (un teléfono), 768 px (donde entra
md:) y 1280 px (un computador). Arrastra el borde para ver el momento exacto
en que la grilla cambia.
La interfaz en pantallas chicas
Que la página “quepa” en el teléfono no basta: también tiene que ser cómoda de usar
con el dedo.
Regla
Por qué
Cómo
Todo en una columna
Leer de arriba abajo es natural en un teléfono
flex-col o grid-cols-1 sin prefijo
Áreas táctiles de al menos 44 px de alto
Un dedo es mucho menos preciso que un cursor
py-3 px-4 en enlaces y botones del menú
Texto de 16 px o más
Lo más chico se lee con esfuerzo
text-base en párrafos y campos
Separación entre enlaces
Evita pulsar el vecino
gap-2 o más en el menú apilado
Nada se sale por el costado
El scroll horizontal se siente roto
Ver el aviso de las tablas
La navbar, apilada en el teléfono y en fila desde md::
block py-3 hace que cada enlace ocupe toda la fila y tenga altura suficiente para el
dedo; desde md:, con el ratón, ya no hace falta tanto relleno.
Los campos de texto con menos de 16 px hacen zoom solos
En el iPhone, al tocar un campo con letra más chica que 16 px, el navegador acerca
la página y el usuario tiene que alejarla a mano. Con text-base en los <input>
y <textarea> no pasa.
Una tabla ancha se sale de la pantalla
Las tablas no se encogen: si tienen muchas columnas, empujan la página hacia el
costado y aparece el scroll horizontal en todo el sitio. Envuélvela en un div
que se desplace solo:
Ahora solo la tabla se desliza de lado, y el resto de la página queda quieta.
Checkpoint
Intenta responder antes de desplegar cada pregunta.
¿Qué hace grid grid-cols-1 gap-6 md:grid-cols-3?
Arma una grilla de una columna en todas las pantallas y, desde 768 px, la
cambia a tres columnas. gap-6 deja 24 px entre las celdas en ambos casos.
En el teléfono aparece scroll horizontal por culpa de una tabla. ¿Cómo se arregla?
Envolviendo la tabla en un div con overflow-x-auto. Así solo la tabla se
desliza de lado y el resto de la página queda quieta.
¿Qué significa "móvil primero"?
Que las clases sin prefijo son las del teléfono, y los prefijos (md:, lg:)
agregan cambios desde cierto ancho hacia arriba. Se diseña primero la pantalla
más chica y después se decide qué cambia cuando hay más espacio.
En el teléfono tu página se ve como la de computador, en miniatura. ¿Qué falta?
La <meta name="viewport">. Sin ella el teléfono finge una pantalla de unos
980 px, y como eso es más que 768, se aplican todas las clases md:.
¿Cómo centras el contenido de una vista y le pones un ancho máximo?
Con mx-auto max-w-5xl px-4 en el contenedor (por ejemplo, el <main>).
max-w-5xl no lo deja pasar de 1024 px, mx-auto lo centra igual que
margin: 0 auto, y px-4 deja aire a los lados en el teléfono.
¿Por qué los enlaces del menú en el teléfono llevan block py-3?
Para que cada uno tenga una altura cómoda para el dedo (al menos 44 px) y ocupe
toda la fila. En la pantalla táctil no hay cursor que apunte con precisión, y un
enlace chico hace que se pulse el vecino.