Tailwind vs CSS Modules: スタイリング手法の比較

Tailwindはクラス名で適用するutility-firstのCSS。CSS Modulesはコンポーネントと同じ場所に配置される、ローカルスコープのスタイルシートです。

Tailwindはマークアップ内の低レベルなユーティリティクラスからデザインを組み立て、purgeステップでバンドルを小さく保ちます。CSS Modulesは、通常のCSSを書きつつコンポーネントに自動的にスコープさせ、グローバルな衝突を回避します。Tailwindは速度と一貫性を優先し、CSS Modulesは馴染みのある明示的なCSSを優先します。

CIでは

どちらもCIで問題なくビルドされます。Tailwindは未使用クラスを削るpurge/JITステップを追加します。CSS Modulesはbundle中にスコープされたクラスのハッシュ化を追加します。どちらもビルドの複雑さを実質的に変えません。チームの好みで選びましょう - 多くは速度と一貫性のためにTailwind、明示的でフレームワークに依存しないスタイルのためにCSS Modulesを使います。

高速化する

どちらの場合も、依存関係とbuild cacheを実行間でcacheします。両方ともCI runner上でビルドされます。高速なmanaged runnerはassetビルドのステップを短縮します。

結論

高速な記述、design tokens、一貫性を求める: Tailwind。ユーティリティを学ばずに明示的でスコープされたCSSを書きたい: CSS Modules。どちらも本番実績があります。選択はおおむねチームの好みです。

関連ガイド