Vue3

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

Tailwind CSS v4 Migration

はじめに

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

[Vue3] プロジェクト作成 (windows)

Vueとは

Vue は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。
Vue3 ドキュメント