¿Por qué UnoCSS?
Motivaciones
Te recomendamos leer la publicación del blog Reimagine Atomic CSS escrita por el creador de UnoCSS, Anthony Fu, para obtener una mejor comprensión de la motivación detrás de UnoCSS.
¿Cómo es UnoCSS diferente de X?
Windi CSS
UnoCSS fue iniciado por uno de los miembros del equipo de Windi CSS, con mucha inspiración tomada del trabajo que hicimos en Windi CSS. Si bien Windi CSS ya no se mantiene activamente (a partir de marzo de 2023), puedes considerar UnoCSS como un "sucesor espiritual" de Windi CSS.
UnoCSS hereda la naturaleza bajo demanda de Windi CSS, el modo attributify, atajos, grupos de variantes, modo de compilación y mucho más. Además de eso, UnoCSS está construido desde cero con la máxima extensibilidad y rendimiento en mente, permitiéndonos introducir nuevas características como iconos CSS puros, attributify sin valor, tagify, fuentes web, etc.
Lo más importante es que UnoCSS se extrae como un motor de CSS atómico, donde todas las características son opcionales, y facilita crear tus propias convenciones, tu propio sistema de diseño y tus propios presets - con las combinaciones de características que quieras.
Tailwind CSS
Tanto Windi CSS como UnoCSS tomaron mucha inspiración de Tailwind CSS. Como UnoCSS está construido desde cero, podemos tener una gran visión general de cómo el CSS atómico ha sido diseñado con trabajos previos y abstraído en una API elegante y poderosa. Con objetivos de diseño bastante diferentes, no es realmente una comparación de manzanas con manzanas con Tailwind CSS. Pero intentaremos listar algunas diferencias.
Tailwind CSS es un plugin de PostCSS, mientras que UnoCSS es un motor isomórfico con una colección de integraciones de primera clase con herramientas de construcción (incluyendo un plugin de PostCSS). Esto significa que UnoCSS puede ser mucho más flexible para usarse en diferentes lugares (por ejemplo, Runtime CDN, que genera CSS sobre la marcha) y tener integraciones profundas con herramientas de construcción para proporcionar mejor HMR, rendimiento y experiencia de desarrollador (por ejemplo, el Inspector).
Dejando de lado las compensaciones técnicas, UnoCSS también está diseñado para ser completamente extensible y personalizable, mientras que Tailwind CSS es más opinado. Construir un sistema de diseño personalizado (o tokens de diseño) sobre Tailwind CSS puede ser difícil, y realmente no puedes alejarte de las convenciones de Tailwind CSS. Con UnoCSS, puedes construir prácticamente cualquier cosa que quieras con control total. Por ejemplo, implementamos todas las utilidades compatibles con Tailwind CSS dentro de un solo preset, y hay muchos presets increíbles de la comunidad implementados con otras filosofías interesantes.
Gracias a la flexibilidad que proporciona UnoCSS, podemos experimentar con muchas características innovadoras sobre él, por ejemplo:
Debido a los diferentes objetivos de diseño sobre Tailwind CSS, UnoCSS no soporta el sistema de plugins o configuraciones de Tailwind CSS, lo que significa que podría hacer más difícil migrar desde un proyecto de Tailwind CSS fuertemente personalizado. Esta es la decisión intencionada para hacer UnoCSS de alto rendimiento y extensible, y creemos que la compensación vale la pena.