Tailwind CSS
小さなユーティリティクラスを組み合わせて画面を装飾するCSS フレームワーク。設計トークンに沿ったCSSをクラス名から生成する。
何を担当する？
設計トークンに沿ったCSSをクラス名から生成する。
いつ使う？
- 独自設計を素早く組み、CSSの増加を抑えたいとき。
避けたい場面
- 意味のあるクラス名だけで既存CSSを維持する方針のとき。
Tailwind CSS / UnoCSS
「どっちが上？」ではなく、まず同じ仕事をする道具なのかを確認します。
直接比較しやすい組み合わせ
Tailwind CSSとUnoCSSはどちらも「CSS設計・生成」の技術なので、同じ土俵で比較しやすい組み合わせです。
UnoCSS
必要なユーティリティだけを即時生成するアトミック CSS エンジン。プリセットとルールから使用中のクラスに対応するCSSを生成する。
何を担当する？
プリセットとルールから使用中のクラスに対応するCSSを生成する。
いつ使う？
- 独自ユーティリティ規則と小さな生成物を柔軟に設計したいとき。
避けたい場面
- 規約済みの部品集だけで設計を統一したいとき。
Tailwind CSSとUnoCSSはスタイルの再利用、局所化、実行時コストで比較される。設計トークンに沿ったCSSをクラス名から生成する。一方、UnoCSSはプリセットとルールから使用中のクラスに対応するCSSを生成する。