Ficha de herramienta

Tailwind CSS

Item: Tailwind CSS
Rating: 4.8

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

Categoría: Stack
Precio: 0 € · Gratis
Frecuencia: Según el proyecto
Mi nota: 4.8 de 5

Probar Tailwind CSS (sitio oficial, nueva pestaña)

En resumen

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

Ideal para: Desarrolladores que quieren dar estilos rápido sin salir de su archivo HTML/JSX
Caso de uso: Estilos de componentes React, Next.js, Vue, del prototipo a producción

Lo que cuesta

Precio de entrada: 0 €. Precios tomados del sitio oficial, sin impuestos.

Lo que cuesta
Plan	Al mes	Al año	Para quién
Open Source	0 €	–	Todos los desarrolladores web: ningún plan de pago

Las alternativas descartadas

Las alternativas descartadas
Alternativa	Por qué no me quedé con ella
CSS Modules	CSS Modules para equipos que quieren archivos separados y limpios. Tailwind para la velocidad de iteración. 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
Bootstrap	Bootstrap para arrancar muy rápido con componentes. Tailwind para un diseño a medida. 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
styled-components / Emotion	CSS-in-JS para estilos muy dinámicos ligados a props. Tailwind para la gran mayoría de los casos. 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

Puntos fuertes y límites

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

Compatibilidad

macOS : compatible
Windows : compatible
Linux : compatible
iOS : no compatible
Android : no compatible
Navegador : compatible
API : no compatible
n8n : no compatible
Zapier : no compatible

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

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

Lo recomiendo a: Cualquier desarrollador web front-end, especialmente con React, Next.js o Vue.
No es para: Proyectos con contenido totalmente dinámico desde un CMS (clases no detectables en la compilación).
Relación calidad/precio: Excelente · 4.8 de 5

Otras herramientas del banco de trabajo

Stack · 0 € (self-hosted)
n8n
Stack · 0 €
Docker
Stack · 0 €
Appwrite

Plan

Al mes

Al año

Para quién

Open Source

0 €

–

Todos los desarrolladores web: ningún plan de pago

Las alternativas descartadas

Las alternativas descartadas
Alternativa	Por qué no me quedé con ella
CSS Modules	CSS Modules para equipos que quieren archivos separados y limpios. Tailwind para la velocidad de iteración. 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
Bootstrap	Bootstrap para arrancar muy rápido con componentes. Tailwind para un diseño a medida. 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
styled-components / Emotion	CSS-in-JS para estilos muy dinámicos ligados a props. Tailwind para la gran mayoría de los casos. 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

Puntos fuertes y límites

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

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

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

Lo recomiendo a: Cualquier desarrollador web front-end, especialmente con React, Next.js o Vue.
No es para: Proyectos con contenido totalmente dinámico desde un CMS (clases no detectables en la compilación).
Relación calidad/precio: Excelente · 4.8 de 5

Tailwind CSS

En resumen

Lo que cuesta

Las alternativas descartadas

Puntos fuertes y límites

Ventajas

Inconvenientes

Funciones principales

Compatibilidad

Preguntas frecuentes

Veredicto final

Otras herramientas del banco de trabajo

n8n

Docker

Appwrite

Tailwind CSS

En resumen

Lo que cuesta

Las alternativas descartadas

Puntos fuertes y límites

Ventajas

Inconvenientes

Funciones principales

Compatibilidad

Preguntas frecuentes

Veredicto final

Otras herramientas del banco de trabajo

n8n

Docker

Appwrite