Tailwind CSS es un framework de utilidades: en lugar de escribir tus propias reglas CSS en un archivo aparte, aplicas clases predefinidas directamente en el HTML, y cada clase hace una sola cosa muy concreta. ¿Quieres flexbox? flex. ¿Un padding de 1rem? p-4. ¿Texto en gris oscuro? text-slate-700. Combinando decenas de estas clases pequeñas construyes cualquier diseño, sin salir del HTML ni pensar en nombres de clases nuevos cada vez.
Suena a un paso atrás para cualquiera que haya aprendido que "el HTML no debe mezclarse con los estilos". Y sin embargo, es probablemente el framework de CSS más usado en proyectos nuevos hoy en día. Vamos a ver por qué funciona en la práctica, aunque rompa una regla que parecía sagrada.
CSS tradicional frente a utilidades: el mismo botón, dos formas
La diferencia se entiende mejor viendo el mismo componente resuelto de las dos formas. Un botón azul, con esquinas redondeadas, que oscurece un poco al pasar el ratón por encima.
<button class="btn-primario">Guardar cambios</button>
<style>
.btn-primario {
background-color: #2563eb;
color: white;
padding: 0.5rem 1.25rem;
border-radius: 0.5rem;
font-weight: 600;
}
.btn-primario:hover {
background-color: #1d4ed8;
}
</style><button class="bg-blue-600 hover:bg-blue-700 text-white
px-5 py-2 rounded-lg font-semibold">
Guardar cambios
</button>
<!-- No hace falta ningún archivo .css aparte -->Con Tailwind no inventas el nombre btn-primario, no saltas entre el HTML y una hoja de estilos para ver qué hace esa clase, y no acumulas reglas CSS que nadie sabe si siguen usándose. El precio que pagas es un HTML más largo visualmente. Para la mayoría de equipos, ese intercambio compensa.
Por qué no termina en un CSS gigante y descontrolado
La objeción más común es: "si cada componente repite clases como px-5 py-2 rounded-lg, vas a acabar con HTML duplicado por todas partes". Tailwind resuelve esto de dos formas. La primera es la función @apply, que te permite agrupar utilidades repetidas bajo un nombre cuando de verdad lo necesitas. La segunda, más habitual en proyectos con React u otro framework de componentes, es simplemente crear un componente <Boton> reutilizable: la duplicación de clases desaparece porque la duplicación de HTML también desaparece.
Además, Tailwind incluye un paso de compilación que analiza tu código y elimina del CSS final cualquier clase que no estés usando. El resultado es un archivo de estilos final sorprendentemente pequeño, incluso en proyectos grandes con miles de clases de utilidad disponibles.
Consistencia de diseño "gratis"
Otra ventaja que se nota menos al principio: Tailwind viene con una escala de valores predefinida —espaciados, tamaños de fuente, colores— en lugar de dejarte escribir cualquier número. Eso significa que es más difícil acabar con quince tonos de azul ligeramente distintos en la misma aplicación, algo muy habitual en proyectos con CSS escrito a mano por varias personas a lo largo del tiempo. Si vienes de comparar layouts con CSS Grid y Flexbox, Tailwind no sustituye a ninguno de los dos: te da clases (grid, flex, gap-4) para usarlos exactamente igual, solo que sin escribir la regla CSS a mano.
Cuándo tiene sentido usarlo (y cuándo no)
Tiene sentido en proyectos con un equipo pequeño o mediano que valora velocidad de desarrollo, en aplicaciones con muchos componentes reutilizables, y en cualquier stack donde ya trabajes con componentes (React, Vue, Svelte), porque ahí la "duplicación de clases" deja de ser un problema real. También es una opción sólida si estás aprendiendo frontend: evita que te bloquees pensando en nombres de clases y en la especificidad de CSS mientras todavía estás aprendiendo maquetación.
Tiene menos sentido si trabajas en un sitio con muy poco CSS personalizado, si tu equipo tiene fuertes convenciones de CSS ya establecidas que funcionan bien, o si vas a entregar el HTML a otro equipo que no conoce Tailwind y va a tener que mantenerlo después.
Cómo empezar
La forma más rápida de probarlo es con su CLI oficial o integrado en un proyecto de React con Vite: instalas el paquete, generas un archivo de configuración mínimo, y añades una directiva en tu CSS principal para que Tailwind inyecte sus utilidades. A partir de ahí, cualquier clase que escribas en tu HTML ya está disponible, sin reiniciar nada ni escribir CSS adicional salvo para casos muy concretos que las utilidades no cubran.
