Lección 6 · Dale TU cara: Tailwind CSS desde cero

A mucha gente el diseño web le da pánico: archivos CSS enormes, reglas que se pisan unas a otras… Por eso existe Tailwind CSS, y por eso Cursalia lo usa. En esta lección entenderás, desde cero, cómo darle tu cara a tu academia escribiendo simples "palabritas" en el HTML.

¿Qué es Tailwind CSS? (en cristiano)

Tailwind es una caja de piezas de diseño pequeñas que aplicas directamente sobre los elementos. En vez de escribir reglas de CSS aparte, pones clases con nombres que dicen lo que hacen:

• text-center → centra el texto
• p-4 → añade relleno (padding) alrededor
• rounded → esquinas redondeadas
• bg-green-500 → fondo verde

Un ejemplo que lo dice todo

Mira este botón. A la izquierda, el HTML con clases de Tailwind; a la derecha, el resultado vivo:

<button class="bg-green-600 text-white px-6 py-3 rounded-full font-bold">
  Descargar gratis
</button>

¿Ves la magia? Cada "palabrita" del HTML es una pieza de diseño. Combinándolas construyes cualquier cosa, sin tocar un archivo CSS.

¿Por qué Cursalia usa Tailwind?

• Rapidez: cambias el diseño sin saltar entre archivos.
• Consistencia: todo encaja porque usas las mismas piezas.
• Ligereza: al compilar, solo se incluye lo que de verdad usas.

Resumen

• Tailwind = piezas de diseño que pones como clases en el HTML.
• Nombres descriptivos (text-center, p-4, rounded) fáciles de aprender.
• Diseñas rápido, consistente y ligero, sin pelearte con CSS.

Ya sabes la herramienta. En la próxima lección la usamos para lo importante: definir tu marca (colores, fuentes y logo) en un par de horas.