CursosEmpresasBlogLiveConfPrecios

Primeros pasos con Tailwind CSS

Clase 2 de 19 • Curso de TailwindCSS

Clase anteriorSiguiente clase
Resumen

Construir una web rápida, limpia y escalable es posible con clases de utilidad de Tailwind CSS. Sin escribir CSS personalizado, puedes componer interfaces ágiles, aprovechar un CDN para empezar en minutos y activar modo oscuro con pocas líneas, todo desde Visual Studio Code con Live Server.

¿Qué hace potente a Tailwind CSS frente a otros frameworks?

Tailwind CSS se basa en clases de utilidad fáciles de leer y combinar. A diferencia de Bootstrap o Foundation, no te impone componentes prehechos: tú compones el diseño con piezas pequeñas como text-lg, font-medium o bg-blue-500. Esto favorece la escalabilidad, la mantenibilidad y una curva de trabajo más ágil.

  • Composición flexible con utilidades como font-medium, text-lg y bg-blue-500.
  • Escalas de color: el número (por ejemplo, 500 o 900) indica la intensidad.
  • Semántica HTML clara: etiquetas y clases comunican el diseño.
  • Responsive fácil: container, mx-auto, flex, items-center, justify-between.
  • Primeros pasos inmediatos con CDN: ideal para prototipos, aunque no optimiza a gran escala.

¿Cómo integrar Tailwind CSS vía CDN e iniciar un header?

No necesitas instalar paquetes: basta con enlazar el CDN y comenzar a usar clases de utilidad. La visualización es instantánea con Live Server (en el ejemplo se habilita en el puerto 5500).

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Mi sitio con Tailwind</title>
  </head>
  <body>
    <header class="bg-blue-500 text-white">
      <nav class="container mx-auto flex items-center justify-between">
        <a href="#" class="text-lg font-bold">Logo</a>
        <ul class="flex space-x-4">
          <li><a href="#" class="hover:text-gray-200">Inicio</a></li>
          <li><a href="#" class="hover:text-gray-200">Acerca</a></li>
          <li><a href="#" class="hover:text-gray-200">Servicios</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>
  • Si una clase está mal escrita, no se aplica. Ejemplo: justify-between debe ir sin letras extra.
  • El color bg-blue-500 y text-white comunican claramente la intención del diseño.
  • La lectura del código es directa: cualquiera entiende el comportamiento sin conocer a fondo Tailwind CSS.

¿Qué clases de utilidad usar para layout y tipografía?

  • container y mx-auto para ancho y centrado del contenido.
  • flex, items-center, justify-between para alinear logo y menú.
  • space-x-4 para separar elementos del menú en el eje x.
  • text-lg y font-bold para jerarquía y énfasis tipográfico.

¿Cómo funciona hover y estados en enlaces?

  • Usa el prefijo hover: para estados interactivos: hover:text-gray-200.
  • Aplica la utilidad al elemento interactivo (a) para respuestas claras al cursor.

¿Cómo activar y ajustar el modo oscuro con variantes dark?

El modo oscuro se activa con el prefijo dark: en las mismas clases. Así controlas colores según la preferencia del sistema operativo (por ejemplo, en Mac al alternar claro/oscuro).

<header class="bg-blue-500 text-white dark:bg-blue-900 dark:text-gray-200">
  <nav class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-lg font-bold">Logo</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="hover:text-gray-200">Inicio</a></li>
      <li><a href="#" class="hover:text-gray-200">Acerca</a></li>
      <li><a href="#" class="hover:text-gray-200">Servicios</a></li>
    </ul>
  </nav>
</header>
  • dark:bg-blue-900 aumenta la intensidad para mejor contraste en oscuro.
  • dark:text-gray-200 suaviza el texto para descanso visual.
  • Con Live Server ves el cambio al instante al alternar el tema del sistema.

¿Te gustaría ver otros ejemplos con utilidades como grid, gap o variantes responsivas como sm:, md: y lg:? Deja tus dudas o pide una ampliación en los comentarios.