Stack

Tailwind CSS

Item: Tailwind CSS
Rating: 4.8

“Estilos directamente en el HTML: sin archivos CSS que gestionar, sin nombres BEM.”

Desde 0 €Probar Tailwind CSS

Resumen rápido

Ideal paraDesarrolladores que quieren dar estilos rápido sin salir de su archivo HTML/JSX

Caso de usoEstilos de componentes React, Next.js, Vue, del prototipo a producción

Punto fuerteVelocidad de desarrollo: ya no hay que nombrar clases ni saltar entre archivos

Punto débilHTML verboso con largas cadenas de clases: la legibilidad se trabaja con cn()

Tailwind cambió la forma de escribir CSS. Una vez adoptado, volver al CSS clásico o a Bootstrap resulta laborioso.

Ventajas e inconvenientes

Ventajas

Sin nombrar clases: se acabaron los ".card-header-title-wrapper" inventados
Bundle CSS mínimo en producción: Tailwind elimina automáticamente las clases no utilizadas
Design system implícito: espaciado, colores y tipografía coherentes por defecto
Excelente integración con React, Next.js, Vue, Astro, Laravel
Ecosistema rico: shadcn/ui, Headless UI, Radix, todos basados en Tailwind

Inconvenientes

HTML verboso: las clases se acumulan rápido (`className="flex items-center gap-4 px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg font-medium text-white"`)
Curva inicial: hay que recordar las equivalencias (px-4 = 1rem, text-sm = 0.875rem)
Sin estilos globales sin configuración: algunos patrones requieren @layer
Menos adecuado para sitios con contenido dinámico procedente de un CMS (las clases en el contenido no se purgan)

Precios

Open Source

0 €/mes

Framework CSS completo
Purge CSS automático (bundle mínimo en producción)
Modo JIT (Just-in-Time)
Plugins oficiales (Typography, Forms, Aspect Ratio)
CLI y plugin de PostCSS

Todos los desarrolladores web: ningún plan de pago

Funciones principales

Modo JIT (Just-in-Time)

Genera al vuelo solo las clases CSS utilizadas en el código

Bundle CSS minúsculo en producción, variantes arbitrarias (w-[347px], bg-[#1a1a2e])

Variants

Prefijos para los estados: hover:, focus:, dark:, md:, lg:, group-hover:...

Gestionar responsive, dark mode y estados interactivos sin escribir media queries

Design tokens integrados

Paleta de colores, espaciado y tipografía coherentes y personalizables

Design system llave en mano, personalizable mediante tailwind.config

Plugin Typography

Estilos tipográficos para contenido markdown/HTML enriquecido (prose)

Dar estilo a artículos de blog y contenido MDX sin escribir CSS propio

Arbitrary values

Usar cualquier valor CSS directamente en una clase ([color:#1a1a2e])

Casos específicos sin salir de Tailwind ni crear una clase propia

Comparación con las alternativas

Cada alternativa tiene su propia página. Ver todas las comparativas.

CSS Modules

Mejor en:HTML limpio y legible, scoping nativo, sin clases que memorizar

Peor en:Archivos CSS separados que mantener, nombres que inventar, más lento para iterar

CSS Modules para equipos que quieren archivos separados y limpios. Tailwind para la velocidad de iteración.

Comparativa Tailwind CSS vs CSS Modules

Bootstrap

Mejor en:Componentes ya construidos y listos para usar, documentación exhaustiva, muy conocido

Peor en:Diseño uniforme difícil de personalizar, bundle más pesado, menos flexible

Bootstrap para arrancar muy rápido con componentes. Tailwind para un diseño a medida.

Comparativa Tailwind CSS vs Bootstrap

styled-components / Emotion

Mejor en:CSS-in-JS con props dinámicas, colocación perfecta entre estilo y componente

Peor en:Rendimiento (CSS en runtime), bundle más pesado, configuración más compleja

CSS-in-JS para estilos muy dinámicos ligados a props. Tailwind para la gran mayoría de los casos.

Comparativa Tailwind CSS vs styled-components / Emotion

Compatibilidad

Preguntas frecuentes

¿Tailwind CSS es gratis?

Sí, totalmente gratis y open source (MIT). Tailwind UI (componentes premium) es de pago.

¿Tailwind engorda el CSS final?

No: el modo JIT solo genera las clases utilizadas. El CSS final suele ser <10 KB en gzip.

¿Tailwind es adecuado para el dark mode?

Sí, el prefijo `dark:` gestiona el dark mode automáticamente según la preferencia del sistema o una clase en el <html>.

¿Tailwind vs shadcn/ui?

shadcn/ui es una biblioteca de componentes basada en Tailwind. Son complementarios, no competidores.

Veredicto final

Relación calidad/precio: Excelente

“El framework CSS que cambió la industria. Una vez adoptado, no hay vuelta atrás.”

Lo recomiendo aCualquier desarrollador web front-end, especialmente con React, Next.js o Vue.

No es paraProyectos con contenido totalmente dinámico desde un CMS (clases no detectables en la compilación).

Probar Tailwind CSS

Todas mis herramientas

Resumen rápido

Ideal paraDesarrolladores que quieren dar estilos rápido sin salir de su archivo HTML/JSX

Caso de usoEstilos de componentes React, Next.js, Vue, del prototipo a producción

Punto fuerteVelocidad de desarrollo: ya no hay que nombrar clases ni saltar entre archivos

Punto débilHTML verboso con largas cadenas de clases: la legibilidad se trabaja con cn()

Tailwind cambió la forma de escribir CSS. Una vez adoptado, volver al CSS clásico o a Bootstrap resulta laborioso.

Ventajas e inconvenientes

Ventajas

Sin nombrar clases: se acabaron los ".card-header-title-wrapper" inventados
Bundle CSS mínimo en producción: Tailwind elimina automáticamente las clases no utilizadas
Design system implícito: espaciado, colores y tipografía coherentes por defecto
Excelente integración con React, Next.js, Vue, Astro, Laravel
Ecosistema rico: shadcn/ui, Headless UI, Radix, todos basados en Tailwind

Inconvenientes

HTML verboso: las clases se acumulan rápido (`className="flex items-center gap-4 px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg font-medium text-white"`)
Curva inicial: hay que recordar las equivalencias (px-4 = 1rem, text-sm = 0.875rem)
Sin estilos globales sin configuración: algunos patrones requieren @layer
Menos adecuado para sitios con contenido dinámico procedente de un CMS (las clases en el contenido no se purgan)

Funciones principales

Modo JIT (Just-in-Time)

Genera al vuelo solo las clases CSS utilizadas en el código

Bundle CSS minúsculo en producción, variantes arbitrarias (w-[347px], bg-[#1a1a2e])

Variants

Prefijos para los estados: hover:, focus:, dark:, md:, lg:, group-hover:...

Gestionar responsive, dark mode y estados interactivos sin escribir media queries

Design tokens integrados

Paleta de colores, espaciado y tipografía coherentes y personalizables

Design system llave en mano, personalizable mediante tailwind.config

Plugin Typography

Estilos tipográficos para contenido markdown/HTML enriquecido (prose)

Dar estilo a artículos de blog y contenido MDX sin escribir CSS propio

Arbitrary values

Usar cualquier valor CSS directamente en una clase ([color:#1a1a2e])

Casos específicos sin salir de Tailwind ni crear una clase propia

Comparación con las alternativas

Cada alternativa tiene su propia página. Ver todas las comparativas.

CSS Modules

Mejor en:HTML limpio y legible, scoping nativo, sin clases que memorizar

Peor en:Archivos CSS separados que mantener, nombres que inventar, más lento para iterar

CSS Modules para equipos que quieren archivos separados y limpios. Tailwind para la velocidad de iteración.

Comparativa Tailwind CSS vs CSS Modules

Bootstrap

Mejor en:Componentes ya construidos y listos para usar, documentación exhaustiva, muy conocido

Peor en:Diseño uniforme difícil de personalizar, bundle más pesado, menos flexible

Bootstrap para arrancar muy rápido con componentes. Tailwind para un diseño a medida.

Comparativa Tailwind CSS vs Bootstrap

styled-components / Emotion

Mejor en:CSS-in-JS con props dinámicas, colocación perfecta entre estilo y componente

Peor en:Rendimiento (CSS en runtime), bundle más pesado, configuración más compleja

CSS-in-JS para estilos muy dinámicos ligados a props. Tailwind para la gran mayoría de los casos.

Comparativa Tailwind CSS vs styled-components / Emotion

Preguntas frecuentes

¿Tailwind CSS es gratis?

Sí, totalmente gratis y open source (MIT). Tailwind UI (componentes premium) es de pago.

¿Tailwind engorda el CSS final?

No: el modo JIT solo genera las clases utilizadas. El CSS final suele ser <10 KB en gzip.

¿Tailwind es adecuado para el dark mode?

Sí, el prefijo `dark:` gestiona el dark mode automáticamente según la preferencia del sistema o una clase en el <html>.

¿Tailwind vs shadcn/ui?

shadcn/ui es una biblioteca de componentes basada en Tailwind. Son complementarios, no competidores.

Veredicto final

Relación calidad/precio: Excelente

“El framework CSS que cambió la industria. Una vez adoptado, no hay vuelta atrás.”

Lo recomiendo aCualquier desarrollador web front-end, especialmente con React, Next.js o Vue.

No es paraProyectos con contenido totalmente dinámico desde un CMS (clases no detectables en la compilación).

Probar Tailwind CSS

Tailwind CSS

Resumen rápido

Ventajas e inconvenientes

Precios

Funciones principales

Comparación con las alternativas

Compatibilidad

Preguntas frecuentes

Veredicto final

Una carta al mes, sobre lo que construyo y lo que aprendo.

Tailwind CSS

Resumen rápido

Ventajas e inconvenientes

Precios

Funciones principales

Comparación con las alternativas

Compatibilidad

Preguntas frecuentes

Veredicto final