なぜ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を高性能で拡張可能にするための意図的な決定であり、このトレードオフは価値があると信じています。