Por que UnoCSS?
Motivações
Recomendamos que você leia o post do blog Reimagine Atomic CSS escrito pelo criador do UnoCSS, Anthony Fu, para obter uma melhor compreensão da motivação por trás do UnoCSS.
Como o UnoCSS é Diferente de X?
Windi CSS
O UnoCSS foi iniciado por um dos membros da equipe do Windi CSS, com muita inspiração tirada do trabalho que fizemos no Windi CSS. Embora o Windi CSS não esteja mais sendo mantido ativamente (a partir de março de 2023), você pode considerar o UnoCSS como um "sucessor espiritual" do Windi CSS.
O UnoCSS herda a natureza sob demanda do Windi CSS, modo attributify, atalhos, grupos de variantes, modo de compilação e muito mais. Além disso, o UnoCSS foi construído desde o início com máxima extensibilidade e desempenho em mente, permitindo-nos introduzir novos recursos como ícones CSS puros, attributify sem valor, tagify, web fonts, etc.
Mais importante ainda, o UnoCSS é extraído como um motor CSS atômico, onde todos os recursos são opcionais, e tornando fácil criar suas próprias convenções, próprio sistema de design e próprios presets - com as combinações dos recursos que você deseja.
Tailwind CSS
Tanto o Windi CSS quanto o UnoCSS tiraram muita inspiração do Tailwind CSS. Como o UnoCSS foi construído desde o início, somos capazes de ter uma grande visão geral de como o CSS atômico foi projetado com trabalhos anteriores e abstraído em uma API elegante e poderosa. Com objetivos de design bastante diferentes, não é realmente uma comparação direta com o Tailwind CSS. Mas tentaremos listar algumas diferenças.
O Tailwind CSS é um plugin PostCSS, enquanto o UnoCSS é um motor isomórfico com uma coleção de integrações de primeira classe com ferramentas de build (incluindo um plugin PostCSS). Isso significa que o UnoCSS pode ser muito mais flexível para ser usado em diferentes lugares (por exemplo, CDN Runtime, que gera CSS em tempo real) e ter integrações profundas com ferramentas de build para fornecer melhor HMR, desempenho e experiência do desenvolvedor (por exemplo, o Inspector).
Deixando de lado as compensações técnicas, o UnoCSS também foi projetado para ser totalmente extensível e personalizável, enquanto o Tailwind CSS é mais opinativo. Construir um sistema de design personalizado (ou tokens de design) sobre o Tailwind CSS pode ser difícil, e você não pode realmente se afastar das convenções do Tailwind CSS. Com o UnoCSS, você pode construir praticamente qualquer coisa que quiser com controle total. Por exemplo, implementamos todas as utilidades compatíveis com Tailwind CSS dentro de um único preset, e existem muitos presets incríveis da comunidade implementados com outras filosofias interessantes.
Graças à flexibilidade que o UnoCSS fornece, somos capazes de experimentar muitos recursos inovadores sobre ele, por exemplo:
Devido aos diferentes objetivos de design em relação ao Tailwind CSS, o UnoCSS não suporta o sistema de plugins ou configurações do Tailwind CSS, o que pode dificultar a migração de um projeto Tailwind CSS altamente personalizado. Esta é a decisão intencional para tornar o UnoCSS de alto desempenho e extensível, e acreditamos que a compensação vale a pena.