WindiCSS es un framework CSS basado en el principio de utility-first. Es una alternativa a TailwindCSS (del que ya hemos hablado aquí o aquí) que promete unos tiempos de carga más rápidos y, además, ofrece una serie de utilidades que mejoran la experiencia de desarrollo.
WindiCSS surge, como proyecto totalmente mantenido por la comunidad, antes de que TailwindCSS incluyese el modo Just-in-Time (JIT) que genera las clases utilizadas en el proyecto bajo demanda, para hacer exactamente eso y optimizar los tiempos de carga.
Principales características:
Todas las utilidades de Tailwind están soportadas en WindiCSS, este, además, incorpora algunas nuevas:
Variant Groups
En ocasiones, se hacen necesarias varias clases para el comportamiento de un hover, o para indicar los estilos de un breakpoint específico. Para mejorar la comprensibilidad del código WindiCSS permite agruparlas utilizando paréntesis de la siguiente manera:
hover:(bg-gray-500 color-white border-gray-700) lg:(flex-row gap-x-4)
Shortcuts
A través de la configuración de WindiCSS podremos crear facilmente shortcuts, o lo que es lo mismo, nuevas clases a partir de la combinación de clases ya existentes:
export default {
shortcuts: {
'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
'btn-green': 'border-4 border-red-400',
},
}
Breackpoints variants
Al igual que en Tailwind, se utilizan los prefijo como md: o lg: para indicar las clases que deben afectar a un determinado breakpoint, pero además WindiCSS permite tener mayor control sobre los breakpoints sin necesidad de agregar CSS extra:
- El prefijo < se utiliza para indicar las clases aplican sobre tamaños menores al dado.
- El prefijo @ se utiliza para indicar que las clases aplican unicamente sobre el rango del breakpoint dado.
<lg: px-4 py-2
@lg: px-8 py-4
!Important
WindiCSS permite utilizar !important para sobreescribir algunas clases definidas con anterioridad. Simplemente es necesario añadir el prefijo !:
text-lg !text-xl
Attributify
Una característica muy potente que incopora WindiCSS es la posibilidad de asignar las clases como atributos de un elemento.
<button bg="green-400 hover:green-600" text="lg white" p="y-2 x-4" border="2 rounded green-600" > Button </button>
Para poder utilizarlo hay que activarlo en el archivo de configuración.
import { defineConfig } from 'windicss/helpers' export default defineConfig({ attributify: true, })
Para evitar un conflicto de nombres se puede configurar también un prefijo
export default { attributify: { prefix: 'w:', }, }
<button w:bg="green-400 hover:green-600" w:text="lg white" w:p="y-2 x-4" w:border="2 rounded green-600" > w:Button </button>
Visual Analyzer
Una interesante herramienta que permite visualizar de forma rápida todas las clases que se han utilizado en el proyecto:
