UnoCSSとは？
動機
UnoCSS作成者のAnthony Fuによるブログ記事Reimagine Atomic CSSを読むことをお勧めします。UnoCSSの背後にある動機をよりよく理解できます。
UnoCSSとXの違い
Windi CSS
UnoCSSは、Windi CSSのチームメンバーの一人によって開始され、Windi CSSで行った作業から多くのインスピレーションを得ています。Windi CSSは(2023年3月現在)アクティブにメンテナンスされていませんが、UnoCSSをWindi CSSの「精神的な後継者」と考えることができます。
UnoCSSは、Windi CSSのオンデマンドな性質、attributifyモード、ショートカット、バリアントグループ、コンパイルモードなどを継承しています。さらに、UnoCSSは最大限の拡張性とパフォーマンスを念頭に置いてゼロから構築されており、純粋なCSSアイコン、値のないattributify、tagify、Webフォントなどの新機能を導入することが可能になります。
最も重要なのは、UnoCSSはアトミックCSSエンジンとして抽出されており、すべての機能はオプションであり、独自の規則、独自の設計システム、独自のプリセットを、必要な機能の組み合わせで簡単に作成できます。
Tailwind CSS
Windi CSSとUnoCSSの両方がTailwind CSSから多くのインスピレーションを得ています。UnoCSSはゼロから構築されているため、アトミックCSSがどのように設計され、以前の技術とエレガントで強力なAPIに抽象化されたかを全体像を把握できます。設計目標がかなり異なるため、Tailwind CSSとの直接比較ではありません。しかし、いくつかの違いをリストアップしてみます。
Tailwind CSSはPostCSSプラグインですが、UnoCSSは、ビルドツールとの一流の統合のコレクションを備えた同型エンジンです（PostCSSプラグインを含む）。つまり、UnoCSSは、さまざまな場所で（たとえば、CDNランタイム（動的にCSSを生成する）など）柔軟に使用でき、ビルドツールと深く統合して、より優れたHMR、パフォーマンス、開発者エクスペリエンスを提供できます（たとえば、インスペクターなど）。
技術的なトレードオフはさておき、UnoCSSは完全に拡張可能でカスタマイズ可能であるように設計されている一方で、Tailwind CSSはより意見の強いものです。Tailwind CSSの上にカスタム設計システム（または設計トークン）を構築するのは困難であり、Tailwind CSSの規則から完全に離れることはできません。UnoCSSを使用すると、完全に制御してほぼ何でも構築できます。たとえば、単一のプリセット内にTailwind CSS互換のユーティリティ全体を実装し、他の興味深い哲学を使用して実装された素晴らしいコミュニティプリセットがたくさんあります。
UnoCSSが提供する柔軟性のおかげで、多くの革新的な機能を試すことができます。たとえば、
Tailwind CSSとは異なる設計目標のため、UnoCSSはTailwind CSSのプラグインシステムや設定をサポートしていません。つまり、高度にカスタマイズされたTailwind CSSプロジェクトからの移行が難しくなる可能性があります。これは、UnoCSSを高性能で拡張可能にするための意図的な決定であり、そのトレードオフは価値があると信じています。