Tailwindv4

【まとめ】Nuxt UI v3でTailwind CSS v4を使う際の移行ポイントと解決策

はじめに

Miyagi です。Nuxt UI v3 への移行プロジェクトで、Tailwind CSS v4 の統合環境に直面しました。v4 では根本的なアーキテクチャの変更があり、後述する「CSS-first アプローチ」という新しい設計思想が採用されています。 約 130 個の Vue コンポーネントを持つプロジェクトで、15 日間かけて移行を完了させました。その過程で遭遇した対応についてのまとめを共有します。

Tailwind CSS v4で動的クラス名が使えない?CSS変数とTypeScriptで解決する2つの方法

Tailwind CSS v4 Migration

はじめに

Miyagi です。Tailwind CSS v4 への移行を進めていたところ、ちょっと困った問題に遭遇しました。。 今までtailwind.config.tsで TypeScript を使って管理していた色定義が、v4 ではmain.cssに移行することになったんです。設定ファイルが CSS ベースになることで高速化の恩恵は受けられるものの、TypeScript で動的にクラス名を生成していた部分が動かなくなってしまいました。