Acceder al contenido principal

WindiCSS. Mejorando TailwindCSS

Volver a Blog

WindiCSS. Mejorando TailwindCSS

17 Feb 022
WindiCSS
Miriam Uriarte Solucionex

Frontend , CSS , Tailwindcss ,

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:

Visual Analyzer WindiCSS

 

Para saber más:

Página oficial de WindiCSS

Repositorio en GitHub

Comentarios

Añadir nuevo comentario