Windi

Me encanta comparar herramientas cuando resuelven el mismo problema con enfoques distintos: en el caso de Windi y Tailwind, la diferencia en cómo manejan las clases dinámicas se nota mucho en el flujo de trabajo diario. He usado ambos en proyectos con Vue y React, y la experiencia varía según cuánto generes clases en tiempo de ejecución (concatenaciones, bindings, plantillas, variables CSS). Aquí cuento las diferencias clave, ejemplos prácticos y qué elegir según tu estilo de desarrollo.

Windi nació con un motor on-demand que escanea plantillas y genera CSS en tiempo real, y eso le da una ventaja clara en detección de clases dinámicas. Su extractor es más permisivo y cuenta con transformadores que interpretan expresiones más complejas (por ejemplo, strings interpoladas en templates de Vue o concatenaciones comunes). Eso significa que cosas como class=\"text-\${size}\" o :class=\"[isActive ? 'bg-red-500' : 'bg-green-500']\" tienen mayor probabilidad de ser detectadas sin configuración adicional. Además Windi ofrece 'attributify' (usar atributos en vez de class) y 'shortcuts' para crear alias de utilidades, lo que ayuda cuando generas clases de forma programática: puedes centralizar patrones y reducir la necesidad de interpolaciones en tiempo de ejecución.

Tailwind, especialmente desde la llegada de su modo JIT oficial, redujo mucho la brecha: el compilador JIT genera utilidades bajo demanda y soporta valores arbitrarios como w-[calc(100%-12px)] o text-[var(--size)]. Sin embargo, Tailwind suele requerir más disciplina en proyectos con clases completamente dinámicas: si las clases no aparecen literalmente en los archivos fuente, hay que recurrir a safelists o patrones de purga (regex) en la configuración para asegurar su inclusión. En resumen, Tailwind JIT es muy potente y ahora cubre muchos casos, pero en escenarios con binding complejo o plantillas generadas dinámicamente, puede pedir más configuración manual.

Otro punto práctico: rendimiento y dev UX. Windi fue diseñado para ser ultrarrápido y sensible en el dev server, con recálculos ágiles cuando cambian las clases. También su ecosistema trae utilidades integradas para extraer clases en distintos formatos y para agrupar variantes, lo que resulta cómodo si eres de los que escribe clases en runtime. Tailwind ha reducido la diferencia, pero en setups donde los strings de clase se generan por lógica compleja, Windi tiende a ahorrarte tiempo al evitar safelists extensas. Por otro lado, Tailwind tiene una comunidad enorme y plugins consolidados, y si tus clases dinámicas están limitadas a unos pocos patrones, la configuración de Tailwind suele ser suficiente.

En mi experiencia personal, si tu proyecto usa muchas interpolaciones, bindings de Vue/Svelte o patrones dinámicos, Windi te da menos fricciones. Si prefieres la estabilidad y el ecosistema de Tailwind y puedes controlar dónde aparecen las clases (o añadir safelists/regex), Tailwind JIT te dará el poder necesario sin complicarte demasiado. Al final, la elección suele reducirse a cuánto generas clases en runtime y cuánto quieres que la herramienta "adivine" esos patrones por ti: ambos son excelentes, pero Windi tiende a ser más permisivo y orientado a flujos dinámicos, mientras que Tailwind apuesta por predictibilidad y un ecosistema más masivo.

Me flipa lo eficiente que es Windi para mantener el CSS en producción ligero sin que tengas que renunciar a flexibilidad o utilidades dinámicas. Yo lo he usado en varios proyectos y la forma en que resuelve el crecimiento descontrolado del CSS es muy distinta a la de frameworks que generan todas las clases posibles: Windi funciona on-demand (JIT), escanea tu código y solo genera las reglas que realmente usas, lo que ya reduce muchísimo el tamaño final.

En práctica, Windi detecta las clases en tus archivos (HTML, Vue, React, Svelte, JS, TS, e incluso plantillas no convencionales) gracias a extractors configurables. Durante el build en producción, el motor JIT crea solo las reglas necesarias, incluidos los valores arbitrarios como «bg-[#1a2b3c]» o «px-[22px]», en vez de precompilar todas las combinaciones posibles. Esto evita el enorme fichero CSS que obtendrías si generases todas las variantes por adelantado. Además, puedes definir una safelist para forzar que ciertas clases siempre estén disponibles, y patrones de extracción para que Windi reconozca las clases dinámicas que construyes con concatenaciones o templates literales.

Otros mecanismos que ayudan a recortar peso: puedes desactivar o modularizar la capa «preflight» si no la necesitas, lo que elimina estilos base no usados; los «shortcuts» permiten agrupar combinaciones frecuentes en una sola clase personalizada, lo que reduce repetición; y la configuración de variantes/plugins que no uses puede mantenerse fuera del build. Windi también admite el modo «attributify», que a nivel de HTML puede hacer tu marcado más limpio y ayudarte a evitar múltiples clases redundantes. En cuanto a la cadena de herramientas, Windi se integra con Vite, Webpack y otros bundlers para generar un CSS final único, que suele pasar por minificación y cacheo de assets en el pipeline de producción (puedes añadir plugins de PostCSS si necesitas tratamiento extra como cssnano o purging adicional).

Consejos prácticos que aplico: definir bien los patrones de extracción para detectar clases dinámicas (evitas fugas de CSS), mantener la safelist lo más pequeña posible, desactivar funcionalidades no usadas (preflight, utilidades experimentales) y aprovechar los shortcuts para normalizar patrones de diseño. También reviso el build con el analizador que ofrece Windi o con herramientas de bundle-analyze para ver qué reglas se generan y eliminar dependencias o patrones innecesarios. En proyectos reales eso se traduce en CSS de kilobytes en lugar de megabytes y tiempos de carga mucho mejores. Al final, me encanta usar Windi porque me da la libertad de escribir estilos utilitarios muy expresivos sin pagar el precio de un CSS enorme en producción.

Me encanta cómo Windi acelera el flujo de trabajo, así que aquí te cuento paso a paso cómo lo instalo cuando empiezo un proyecto Vue 3 con Vite.

Primero, en el proyecto ejecuto: npm install -D windicss vite-plugin-windicss. Luego creo un archivo de configuración llamado windi.config.js o windi.config.ts en la raíz, donde defino colores, safelist y plugins si los necesito. Por ejemplo, exporto un objeto con theme, plugins y extract para que analice mis archivos .vue y .html.

Después modifico vite.config.js: import WindiCSS from 'vite-plugin-windicss' y lo añado a la lista de plugins: plugins: [vue, WindiCSS]. En el entry (main.js o main.ts) importo la hoja virtual con import 'virtual:windi.css' y, si quiero, import 'virtual:windi-devtools' para debug. Reinicio el servidor Vite y ya puedo usar clases utilitarias directamente en mis SFC. Si necesito modo attributify activo, lo configuro en windi.config.js. Me resulta limpio, rápido y totalmente compatible con la mentalidad de utilidades de Tailwind, pero con compilado más ágil y menos configuración en general.

Me encanta cuando el CSS queda ajustado y sin peso extra en producción; con Windi CSS esto se logra básicamente configurando correctamente qué archivos escanea y qué clases debe proteger (safelist). Yo siempre reviso dos cosas: que Windi esté apuntando a las carpetas donde está mi HTML/Vue/JS/MD y que las clases dinámicas que genero en tiempo de ejecución estén en una lista segura, porque si no, el purgado se las puede llevar.

En versiones modernas de Windi (v3+), la clave es la opción scan. Un ejemplo típico de windi.config.js que uso es el siguiente:

module.exports = {
scan: {
dirs: ['src', 'pages', 'components',// carpetas a escanear
fileExtensions: ['vue', 'js', 'ts', 'jsx', 'tsx', 'html', 'md'] // extensiones a buscar
},
safelist: [
// clases que siempre queremos mantener (pueden ser strings o regex)
'prose',
/^bg-/, // útil si generas bg-${color}
'text-center'
,
theme: {},
plugins: []
};

Con esto Windi sabe exactamente dónde buscar clases usadas y eliminar las no referenciadas al construir para producción. Si usas Vite o Nuxt con los plugins oficiales (vite-plugin-windicss o @nuxtjs/windicss) normalmente el purgado se hace automáticamente en el build, pero la clave sigue siendo que los dirs/fileExtensions incluyan todo tu código y templates. Si tienes páginas generadas a partir de Markdown o archivos fuera de src, hay que añadir esas carpetas aquí.

Si trabajas con una versión más antigua de Windi o con ciertos entornos, verás la opción extract en lugar de scan. Un ejemplo compatible sería:

module.exports = {
extract: {
include: ['src//.{vue,html,js,ts,jsx,tsx,md}',
exclude: ['nodemodules', '.git']
},
safelist: ['bg-red-500', /^text-/]
};

Algunos consejos prácticos que siempre aplico: 1) añade en safelist cualquier clase que construyas por concatenación (p. ej. ), 2) incluye archivos generados dinámicamente (templates, fragments, .md) para que no se borre CSS que sí necesitas, 3) excluye nodemodules y carpetas grandes que no quieres escanear para ahorrar tiempo, y 4) revisa el log del build: Windi suele indicar cuántas clases ha generado y si hay patrones que no encontró.

En resumen, para purgar eficazmente en producción necesitas configurar los paths que Windi escaneará (scan o extract según versión), declarar una safelist para clases dinámicas y asegurarte de que el plugin de bundler está activo durante el build. Con eso mis builds quedan ligeros y el estilo sigue intacto, y me deja más tiempo para disfrutar de lo creativo en lugar de pelear con el CSS muerto.

Me flipa la forma en que «Windi CSS» acelera proyectos que usan «Tailwind CSS»: no es solo velocidad por velocidad, es una experiencia de desarrollo y entrega mucho más ágil. «Windi CSS» fue pionera en generar utilidades bajo demanda, lo que significa que en vez de compilar una hoja de estilos enorme con todas las clases posibles, el motor analiza el HTML/JSX/Vue/etc. y crea únicamente las reglas que realmente se usan. Eso se traduce en bundles de CSS dramáticamente más pequeños en producción y en tiempos de carga mucho mejores para los usuarios.

En detalle técnico, «Windi CSS» implementa un motor JIT (just-in-time) muy eficiente que detecta clases en tus archivos y produce CSS de forma virtual en el servidor de desarrollo o durante el build. Esto elimina el paso pesado de generar y purgar un CSS completo: en dev obtienes HMR instantáneo porque solo cambian y se sirven las reglas necesarias, y en producción el resultado es un archivo mínimo sin CSS muerto. Además, tiene un sistema de caché y persistencia que evita recompilar las mismas utilidades una y otra vez, acelerando compilaciones incrementales y el tiempo de CI/CD.

Otra ventaja práctica es la flexibilidad y las extensiones que trae «Windi CSS»: modos como attributify reducen el tamaño y la verbosidad en HTML, los transformadores permiten agrupaciones y shorthand que evitan repetir clases, y los extractores detectan patrones complejos (templates, strings dinámicos, etc.). Todo esto contribuye a evitar generar duplicados o reglas innecesarias. También dispone de soporte nativo para variantes arbitrarias y reglas dinámicas, lo que permite escribir utilidades compactas en vez de crear clases redundantes, y a la larga eso baja la presión en el motor de render del navegador (menos reglas = menos trabajo al parsear y aplicar estilos).

Desde el punto de vista del rendimiento UX, un CSS más pequeño reduce el bloqueo en la renderización: menos bytes que descargar, parsear y aplicar, lo que acelera el Time to First Paint y el Time to Interactive. Menos reglas también ayudan al proceso de layout y repaint cuando hay cambios dinámicos. En proyectos grandes esto puede ser visible en dispositivos móviles o conexiones lentas. Por otra parte, la integración con herramientas modernas (Vite, Nuxt, Webpack) es sólida, lo que facilita adoptar «Windi CSS» sin romper flujos ya establecidos y con mejoras inmediatas en velocidad de dev y build.

Al comparar con el flujo clásico de «Tailwind CSS», hoy en día Tailwind incluye su propio JIT, pero «Windi CSS» sigue destacando por algunas utilidades adicionales, su motor de generación virtual y ciertas optimizaciones de rendimiento y ergonomía. En resumen, usar «Windi CSS» con «Tailwind CSS» (o en su lugar) reduce el tamaño del CSS, acelera los ciclos de desarrollo y mejora la experiencia final del usuario al disminuir los tiempos de carga y trabajo de render del navegador. Me encanta cómo transforma proyectos pesados en experiencias ligeras y rápidas; es uno de esos cambios tecnológicos que se nota tanto en el código como en la navegación diaria.