Miyagi です。Nuxt UI v3 への移行プロジェクトで、Tailwind CSS v4 の統合環境に直面しました。v4 では根本的なアーキテクチャの変更があり、後述する「CSS-first アプローチ」という新しい設計思想が採用されています。 約 130 個の Vue コンポーネントを持つプロジェクトで、15 日間かけて移行を完了させました。その過程で遭遇した対応についてのまとめを共有します。
Miyagi です。Tailwind CSS v4 への移行を進めていたところ、ちょっと困った問題に遭遇しました。。
今までtailwind.config.tsで TypeScript を使って管理していた色定義が、v4 ではmain.cssに移行することになったんです。設定ファイルが CSS ベースになることで高速化の恩恵は受けられるものの、TypeScript で動的にクラス名を生成していた部分が動かなくなってしまいました。
一定の幅と高さのボックスを繰り返し表示するタイルレイアウトをレスポンシブ対応にするため、CSS Grid Layout について調べてみました。
CSS を用いて 2 次元のレイアウトを構築するための機能です。格子状のマス目（グリッド）に要素を配置したり、結合したりすることで、様々なレイアウトが可能になります。