Con CSS aprendiste cómo funciona el estilo. Tailwind es la herramienta con la que vas a maquetar el Trabajo 1: en vez de escribir reglas en un archivo aparte, se escriben clases pequeñas directamente en el HTML, y cada una aplica una de las propiedades que ya conoces.
Tailwind no reemplaza lo que sabes de CSS, lo usa
p-4espadding: 1rem,flexesdisplay: flexyhover:es:hover. Si entiendes el modelo de caja, Flexbox y los estados, Tailwind se aprende en una clase. Si no, es copiar y pegar a ciegas.
Tópicos
| Página | Contenido |
|---|---|
| 1. Qué es Tailwind | Clases utilitarias, cómo vincularlo por CDN, cómo se lee una clase y las escalas |
| 2. Clases más usadas | La lista de referencia: fondo, texto, subrayado, espaciado, bordes, Flexbox, Grid, estados y más, con lo que hace cada una |
| 3. Maquetación y diseño responsivo | Flexbox y Grid con clases, móvil primero, sm: md: lg: y la interfaz en pantallas chicas |
| 4. Interfaces de usuario | Jerarquía visual, espacio, color y contraste, componentes con estados y formularios usables, con capturas de versiones buenas y malas |
| 5. Práctica | Pasar el mini sitio de CSS a Tailwind, dejarlo responsivo, cuidar su interfaz y revisarlo en parejas |
Objetivos
- Vincular Tailwind por CDN en todas las vistas del sitio y comprobar que funciona.
- Encontrar la clase de cualquier propiedad de CSS vista y saber qué hace cada clase de uso frecuente.
- Usar las escalas de espaciado y color como un sistema, para que todo el sitio se vea consistente.
- Dar estados a enlaces, botones y campos (
hover:,focus-visible:,active:,disabled:). - Maquetar con Flexbox y Grid desde las clases, pensando primero en el teléfono.
- Diseñar una interfaz que se entienda sin instrucciones: jerarquía clara, contraste suficiente y formularios fáciles de llenar.
Antes de empezar
- Tener el mini sitio con la práctica de CSS terminada y subida a GitHub
- Tener la
<meta name="viewport">en el<head>de las tres vistas (Etiquetas y documento) - Manejar el modelo de caja y Flexbox (Modelo de caja y Flexbox)
- Tener instalada la extensión Tailwind CSS IntelliSense (editor y extensiones)