21 de septiembre de 2025

Tailwind CSS: Concepto Inicial

Como desarrollador web, siempre me ha interesado la manera en que organizamos y escribimos CSS. Durante años, lo normal ha sido usar frameworks como Bootstrap, que ofrecen componentes prefabricados y estilos listos para usar. Sin embargo, en los últimos tiempos ha surgido un enfoque distinto: Tailwind CSS, un framework basado en utilidades que nos invita a construir interfaces desde cero, pero con clases pequeñas y reutilizables.

Hoy quiero presentarte qué es Tailwind, cómo se diferencia de otros frameworks como Bootstrap, y cómo dar tus primeros pasos para usarlo en una página sencilla.

¿Qué es Tailwind CSS?

Tailwind es un framework de CSS que se basa en clases de utilidad. En lugar de usar componentes ya diseñados, te proporciona un conjunto amplio de clases predefinidas (como p-4, text-center, bg-blue-500) que controlan aspectos muy concretos del estilo: márgenes, paddings, colores, tipografías, etc.

Así, cuando empezamos a escribir HTML y le agregamos nuestras clases, lo que estamos haciendo es construir la interfaz de usuario directamente en el marcado, en lugar de ir y venir entre un archivo HTML y otro de CSS. Tailwind CSS en lugar de proveer componentes completos prefabricados (como un botón con un estilo fijo), te ofrece un gran conjunto de clases de utilidad predefinidas. Cada una de estas clases hace una única cosa: por ejemplo, bg-blue-500 le da al elemento un fondo azul, p-4 le añade un padding de 16 píxeles y flex lo convierte en un contenedor flexible.

La filosofía es que, al combinar estas pequeñas y atómicas clases directamente en tu HTML, puedes construir cualquier diseño imaginable. Por ejemplo, para crear un botón, podemos combinar todas estas reglas:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Botón con Tailwind
</button>

Ese botón no necesita CSS adicional: todo está definido en las utilidades de Tailwind.

Diferencias con Bootstrap

Bootstrap: ofrece componentes ya hechos (botones, modales, barras de navegación). Está pensado para que uses plantillas predefinidas y luego las adaptes.
Tailwind: no trae componentes listos. Su filosofía es que los construyas tú mismo combinando utilidades. Esto le da más flexibilidad y menos “aspecto genérico” en tus proyectos.

Podríamos decir que Bootstrap te da bloques montados, mientras que Tailwind te da las piezas de LEGO para construir lo que quieras.

¿Cómo funciona?

Tailwind genera un CSS muy extenso lleno de clases utilitarias. Cuando trabajas en un proyecto, normalmente usas un proceso de compilación (con PostCSS, Vite, Webpack, etc.) que elimina todo lo que no usas, dejando solo las clases necesarias.

En proyectos pequeños, también puedes enlazar la CDN directamente y empezar a usarlo sin configuración.

Primeros pasos con Tailwind en una página simple

Para una prueba rápida, basta con incluir el script desde la CDN:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hola Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-8 rounded shadow-md">
    <h1 class="text-2xl font-bold mb-4 text-center">¡Hola Tailwind!</h1>
    <p class="text-gray-600">Este es mi primer ejemplo con Tailwind CSS.</p>
  </div>
</body>
</html>

Con ese fragmento ya puedes empezar a experimentar. Tailwind se encarga de todo el estilo y te permite ir construyendo tu interfaz con clases utilitarias.

Ventajas y desventajas

Ventajas:

Flexibilidad total: construyes diseños únicos sin depender de plantillas.
Rapidez en el desarrollo una vez te acostumbras a las clases.
Perfecta integración con entornos modernos (React, Vue, Next.js).

Desventajas:

Curva de aprendizaje: al principio, la cantidad de clases puede parecer abrumadora.
HTML más cargado: muchas clases en cada etiqueta.
Necesidad de build tools en proyectos serios (salvo pruebas rápidas con la CDN).

Conclusión

Tailwind CSS no es un reemplazo directo de Bootstrap, sino una alternativa con otra filosofía. Si buscas flexibilidad, personalización y un enfoque más moderno para crear interfaces, vale la pena probarlo.

Con unos pocos pasos ya puedes tenerlo funcionando en tu página, y a medida que te familiarices con sus utilidades, descubrirás lo poderoso que puede ser.