Why UnoCSS

なぜ UnoCSS なのか？

動機

UnoCSS の作成者である Anthony Fu が書いたブログ記事 Reimagine Atomic CSS を読むことをお勧めします。これにより、UnoCSS の背後にある動機をよりよく理解できます。

UnoCSS は他とどう違うのか？

Windi CSS

UnoCSS は Windi CSS のチームメンバーの一人によって始められ、多くのインスピレーションを Windi CSS の作業から得ています。Windi CSS は（2023年3月時点で）もはや積極的にメンテナンスされていませんが、UnoCSS を Windi CSS の「精神的後継者」と考えることができます。

UnoCSS は Windi CSS のオンデマンド性、attributify モード、ショートカット、バリアントグループ、コンパイルモードなどを継承しています。その上で、UnoCSS は最大限の拡張性とパフォーマンスを考慮してゼロから構築されており、純粋な CSS アイコン、値なし attributify、tagify、ウェブフォントなどの新機能を導入することができます。

最も重要なのは、UnoCSS はアトミック CSS エンジンとして抽出されており、すべての機能がオプションであり、望む機能の組み合わせで独自の規約、デザインシステム、プリセットを簡単に作成できることです。

Tailwind CSS

Windi CSS と UnoCSS はどちらも Tailwind CSS から多くのインスピレーションを得ています。UnoCSS はゼロから構築されているため、アトミック CSS がどのように設計されているかを先行技術とともに優れた概要を持ち、エレガントで強力な API に抽象化されています。設計目標がかなり異なるため、Tailwind CSS との比較は必ずしも適切ではありませんが、いくつかの違いを挙げてみます。

Tailwind CSS は PostCSS プラグインであるのに対し、UnoCSS はビルドツールとの一流の統合を持つアイソモーフィックエンジンです（PostCSS プラグインを含む）。これは、UnoCSS が異なる場所でより柔軟に使用できることを意味します（例えば、CDN ランタイムはその場で CSS を生成します）し、ビルドツールとの深い統合により、より良い HMR、パフォーマンス、開発者体験を提供します（例えば、Inspector）。

技術的なトレードオフはさておき、UnoCSS は完全に拡張可能でカスタマイズ可能に設計されており、Tailwind CSS はより意見が強いです。Tailwind CSS の上にカスタムデザインシステム（またはデザイントークン）を構築するのは難しく、Tailwind CSS の規約から離れることはできません。UnoCSS を使えば、ほぼ何でも完全にコントロールして構築できます。例えば、単一のプリセット内で Tailwind CSS 互換のユーティリティ全体を実装し、他の興味深い哲学で実装された素晴らしいコミュニティプリセットがたくさんあります。

UnoCSS が提供する柔軟性のおかげで、以下のような多くの革新的な機能を試すことができます：

Tailwind CSS とは異なる設計目標のため、UnoCSS は Tailwind CSS のプラグインシステムや設定をサポートしていません。これは、カスタマイズされた Tailwind CSS プロジェクトからの移行を難しくするかもしれませんが、UnoCSS を高性能で拡張可能にするための意図的な決定であり、そのトレードオフは価値があると信じています。