1. Qué es Tailwind

¿Qué es Tailwind?

Tailwind es una colección de clases pequeñas, y cada una hace una sola cosa. En vez de inventar una clase .tarjeta y escribir su regla en estilos.css, se combinan las clases que ya existen directamente en el HTML.

La misma tarjeta, escrita de las dos formas:

<!-- Con CSS: el HTML nombra la caja y el estilo vive en estilos.css -->
<div class="tarjeta">…</div>

.tarjeta {
  background-color: #e0f2fe;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

<!-- Con Tailwind: el estilo se escribe en el propio HTML -->
<div class="bg-sky-100 p-6 rounded-lg">…</div>

Clase	Propiedad de CSS que escribe
bg-sky-100	background-color (un celeste claro)
p-6	padding: 1.5rem (24 px)
rounded-lg	border-radius: 0.5rem (8 px)

Tailwind no inventa nada: por debajo escribe las mismas propiedades que viste en el tópico de CSS. Lo que cambia es dónde se escriben.

¿Y no era mala idea poner el estilo en el HTML?

Lo era con style="…", y siguen siendo cosas distintas. Las clases de Tailwind:

• Salen de una escala limitada (no cualquier número), así que el sitio queda parejo sin esfuerzo.
• Aceptan estados y tamaños de pantalla (hover:, md:), que un style="…" no puede expresar.
• No ganan por encima de todo: no hay guerras de especificidad.

El style="…" sigue prohibido.

Cómo vincular Tailwind por CDN

Un CDN (Content Delivery Network) es un servidor público que entrega archivos listos para usar. En vez de descargar e instalar Tailwind, tu página lo pide a ese servidor cada vez que se abre. No hay que instalar nada: basta con una línea.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Parte	Qué significa
<script>	Carga un programa, no una hoja de estilos. Por eso no es un <link>
cdn.jsdelivr.net	El servidor público (el CDN) desde el que se descarga
@tailwindcss/browser	La versión de Tailwind hecha para funcionar directo en el navegador
@4	La versión 4, la que usa el curso

Paso a paso

1. Pega la línea dentro del <head>, después de las <meta> y antes del <title>:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Inicio · Ana Soto</title>
  </head>
  <body>
    …
  </body>
</html>

2. Comprueba que funciona. Pon esto al comienzo del <body>, guarda y ábrelo con Live Server:

<h1 class="bg-sky-700 p-4 text-white">Tailwind funciona</h1>

Si ves una franja azul con el texto blanco y aire alrededor, está vinculado. Después borra esa prueba.

3. Repite la línea en cada vista. El <script> vale solo para la página donde está escrito, igual que un <link> de CSS. Tus tres vistas (index.html, sobre-mi.html, contacto.html) lo llevan, cada una en su <head>.

4. Si venías con CSS, retira el <link> a estilos.css. Mezclar las dos cosas funciona, pero termina en reglas que se pisan y no sabes cuál ganó.

Comprueba el vínculo en el inspector

Abre F12, selecciona un elemento con clases de Tailwind y mira el panel de estilos: ahí aparecen las reglas que Tailwind escribió, por ejemplo .p-4 { padding: calc(var(--spacing) * 4) }. Si el panel no muestra ninguna regla para esas clases, Tailwind no se cargó en esa vista.

Si no se aplica ningún estilo

Revisa en este orden:

1. La URL. Cópiala exacta: una letra de más y el navegador no encuentra el archivo. En la pestaña Consola del inspector aparece un error en rojo.
2. La etiqueta. Es <script src="…"></script>, con su cierre. Un <link href="…"> con esa dirección no funciona.
3. La vista. Cada página necesita su propia línea: si una se ve sin estilos, a esa le falta.
4. La conexión. El archivo se descarga de internet cada vez que se abre la página. Sin conexión, la página se ve como HTML puro.

El CDN es para aprender y prototipar

En un proyecto profesional Tailwind se instala con herramientas que generan un archivo .css final con solo las clases que usaste. Para el curso, el CDN es perfecto: una línea y funciona.

Si VSCode no te sugiere las clases

La extensión Tailwind CSS IntelliSense autocompleta las clases y, al pasar el cursor sobre una, muestra el CSS que escribe. Si no sugiere nada, crea en la raíz del proyecto un archivo tailwind.css con una sola línea, @import "tailwindcss";. No hace falta enlazarlo: solo le avisa a la extensión que el proyecto usa Tailwind.

Lo que Tailwind trae por defecto

Tailwind empieza borrando los estilos que el navegador le pone a cada etiqueta, para partir desde cero. Por eso, apenas lo vinculas, la página cambia aunque no hayas escrito ninguna clase.

Qué hace	Qué vas a notar
Aplica box-sizing: border-box a todo	Las cajas miden lo que dice su width (ver por qué)
Quita los márgenes de títulos, párrafos y listas	Todo queda pegado
Quita las viñetas y el relleno de ul y ol	Las listas ya no tienen puntos
Deja los títulos del mismo tamaño que el texto	Tu <h1> se ve como un párrafo
Quita el subrayado y el color de los enlaces	Los <a> se ven como texto normal
Hace que las imágenes no se salgan de su contenedor	Una foto grande ya no rompe la página

"Mi h1 se ve como un párrafo"

Es lo esperado. El <h1> sigue siendo el título principal (eso es semántica, y no cambia); lo que desapareció es su aspecto por defecto. Ahora el tamaño lo decides tú: <h1 class="text-4xl font-bold">.

Cómo se lee una clase

Tailwind tiene cientos de clases, pero casi todas siguen cinco patrones. Con ellos puedes leer cualquier clase sin buscarla, y adivinar la que necesitas.

Patrón	Ejemplo	Se lee
propiedad-tamaño	p-4, mt-8, gap-6	Relleno 4, margen arriba 8, separación 6 (de la escala)
qué-color-tono	bg-sky-700, text-gray-600	Fondo celeste 700, texto gris 600
propiedad sola	flex, underline, uppercase	Una propiedad con un valor fijo
estado:clase	hover:bg-sky-800	”Al pasar el cursor, fondo celeste 800”
pantalla:clase	md:grid-cols-3	”Desde 768 px, tres columnas”

Número por cuatro, y tienes los píxeles

En la escala de espacios cada paso vale 0.25rem, o sea 4 px: p-1 son 4 px, p-2 son 8, p-4 son 16, p-6 son 24 y p-8 son 32.

Los tonos van de 50 a 950

50 es casi blanco y 950 casi negro: sky-50, sky-100, sky-200 … sky-900, sky-950. Hay una familia por color (gray, red, amber, green, sky, blue, indigo, pink y varias más), además de white y black.

La lista de las clases más usadas, con lo que hace cada una, está en la página siguiente.

Las escalas: un sistema de diseño gratis

En CSS podías escribir padding: 13px en una caja y padding: 17px en otra, y el sitio terminaba con veinte medidas distintas que no calzan. Tailwind te da escalas cortas, y si además eliges pocos valores de cada una, todo el sitio se ve como si lo hubiera diseñado una sola persona con un plan.

Una paleta de ejemplo, suficiente para un sitio completo:

Uso	Clases
Espacio dentro de un grupo	2 y 4 (gap-2, p-4)
Espacio entre grupos y secciones	6, 8 y 12 (gap-6, py-12)
Color principal (botones, enlaces, vista activa)	sky-700, y sky-800 para hover:
Fondo suave (tarjetas destacadas)	sky-50
Texto principal y títulos	gray-900
Texto secundario	gray-600
Bordes y separadores	gray-200
Errores	red-700

Decide tu paleta antes de empezar

Escríbela en un comentario al inicio de index.html o en el README, y úsala en las tres vistas. Cuando dudes qué color o qué espacio poner, la respuesta está en tu lista, no en probar números hasta que se vea bien.

Los valores inventados rompen la escala

Tailwind permite valores fuera de la escala con corchetes: p-[13px], bg-[#12a5ce]. Existen para casos muy puntuales. Si los usas por costumbre, pierdes justo lo que hace que el sitio se vea parejo.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Qué diferencia hay entre class="p-4" y style="padding: 16px"?

Las dos ponen 16 px de relleno, pero p-4 sale de una escala compartida por todo el sitio, puede combinarse con estados y tamaños de pantalla (hover:p-6, md:p-8) y no pisa a las demás reglas. El style="…" es un valor suelto que no admite estados y gana por encima de todo.

¿Cómo se vincula Tailwind por CDN y dónde va la línea?

Con un <script> dentro del <head>, después de las <meta>:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Va en cada vista del sitio: vale solo para la página donde está escrito.

Dos de tus vistas tienen estilos y la tercera se ve como HTML puro. ¿Qué pasó?

A esa vista le falta la línea del <script> en su <head> (o la tiene mal copiada). Cada página carga Tailwind por su cuenta. En el inspector, las clases de esa vista no muestran ninguna regla en el panel de estilos.

Vinculaste Tailwind y tu <h1> quedó del mismo tamaño que el texto. ¿Está mal?

No. Tailwind borra los estilos por defecto del navegador para partir de cero. El <h1> sigue siendo el título principal; el tamaño ahora lo pones tú, por ejemplo text-4xl font-bold.

¿Cuánto mide px-6 y a qué lados se aplica?

6 × 4 = 24 px, a la izquierda y la derecha (la x son los costados). Arriba y abajo no cambia nada.

¿Por qué conviene usar pocos valores de cada escala?

Porque la consistencia es lo que hace que un sitio se vea diseñado. Con dos o tres espacios, un color principal y dos grises para el texto, todas las vistas calzan entre sí y no hay que decidir cada número de nuevo.