Zero-Runtime CSS-in-JSとTailwindどっちを選ぶ？
前提
Nextjs（AppRouter）をプロジェクトで利用することを前提に記事を書いています。
また、幅広く採用されているTailwindと、RSCでの観点でも、オーバーヘッドによるパフォーマンス観点でもZero-Runtimeが推奨されている状況を踏まえてZero-Runtime CSS-in-JSを比較してみます。
本題
1. Zero-Runtime CSS-in-JSとは
Zero-Runtime CSS-in-JSとは、アプリケーションが実行されている間にスタイルを計算したり注入したりしないCSS-in-JSライブラリを指します。
これは、ビルド時にすべてのスタイルが生成され、実行時に追加の計算が不要であることを意味します。
代表的なライブラリには、以下のものがあります。
- Linaria
- Stitches
※ LinariaやStitchesは、静的スタイル生成と動的スタイリングの両方をサポートするため、Hybrid CSS-in-JSと呼ばれたりもします。
これにより、ランタイムパフォーマンスが向上し、初回描画が迅速になるため、ユーザー体験が改善されます。
2. Tailwindとは
Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。
再利用可能なクラスを使って、コンポーネントごとにスタイルを直接定義します。
例えば、bg-blue-500やtext-centerのようなクラス名を使って、簡潔かつ直感的にスタイルを適用できます。
Tailwindの特徴
- ユーティリティファースト（小さなクラスを組み合わせてスタイルを定義）
- レスポンシブデザイン（メディアクエリをクラス名に組み込むことで、レスポンシブ対応が容易）
- カスタマイズ可能（設定ファイルでカスタマイズが可能）
3. 比較した時のメリット・デメリットの説明
Zero-Runtime CSS-in-JSのメリット・デメリット
メリット:
- パフォーマンス（実行時にスタイルの計算が不要なため、パフォーマンスが向上）
- スコープの制御（スタイルがコンポーネントにスコープされるため、スタイルの競合が少ない）
- 静的解析（型安全性やエディタの補完機能が向上）
デメリット:
- 学習コスト（新しいパラダイムに慣れるための学習が必要）
- ビルド設定（WebpackやBabelの設定が複雑になることがある）
Tailwindのメリット・デメリット
メリット:
- 開発スピード（ユーティリティクラスを使うことで、素早くスタイルを適用可能）
- 一貫性（プロジェクト全体で一貫したスタイルを維持しやすい）
- カスタマイズ（簡単にテーマやカスタムユーティリティを追加可能）
デメリット:
- HTMLの肥大化（クラス名が多くなり、HTMLが肥大化することがある）
- CSSの理解不足（細かいスタイルの調整が必要な場合に、CSSの基礎理解が不足することがある）
4. それぞれのプロジェクトへの技術選定ポイント
Zero-Runtime CSS-in-JSを選ぶべきプロジェクト
- パフォーマンスが最重要（高速な初回描画が求められるアプリケーション）
- スケーラビリティ（大規模なプロジェクトや多くのコンポーネントを持つプロジェクト）
- 型安全性（TypeScriptを使用し、スタイルの静的解析が必要なプロジェクト）
Tailwindを選ぶべきプロジェクト
- 素早いプロトタイピング（短期間でのUI構築が求められるプロジェクト）
- チーム開発（一貫したデザインシステムを維持しながら複数人での開発）
- レスポンシブデザイン（レスポンシブ対応が頻繁に求められるプロジェクト）
さいごに
Zero-Runtime CSS-in-JSとTailwindは、それぞれ異なる強みを持っています。
プロジェクトの要件や開発チームのスキルセットに応じて、最適なソリューションを選択することが重要です。
個人的には、個人的なプロジェクトで専ら利用する機会の多いshadcn/uiがTailwindをデフォルトで組み込んでいるので、Tailwindを採用することが多くなりそうです。