Nuxt 3でTailwind CSSの任意値が効かない問題と解決方法

問題の概要

Vueコンポーネント（NebiusFinancialsChart.vue）内でTailwind CSSの任意値を使用した際、クラス名は正しく付与されるものの実際のスタイルが適用されない問題が発生しました。

症状

<div class="relative h-[600px] w-full">
  <canvas ref="canvasRef"></canvas>
</div>

上記のコードで：

className: "relative h-[600px] w-full" （正しく付与されている）
実際の高さ: 150px （期待値: 600px）

開発者ツールで確認するとcomputedHeight: "150px"となっており、Tailwindの任意値h-[600px]が正しくコンパイルされていませんでした。

原因

Nuxt 3の開発環境において、Tailwind CSSの任意値（Arbitrary values）が動的に生成されるVueコンポーネント内で正しくコンパイルされないケースがあります。これは以下のような理由が考えられます：

JITコンパイルのタイミング問題: Tailwindのジャストインタイム（JIT）コンパイラがコンポーネントの変更を検知してクラスを生成するタイミングの問題
キャッシュの問題: 開発サーバーやビルドキャッシュが古い状態のままになっている
Tailwind設定の問題: content パスの設定が適切でない可能性

解決方法

1. インラインスタイルを使用（推奨）

最も確実な方法は、インラインスタイルを使用することです：

<div class="relative w-full" style="height: 600px;">
  <canvas ref="canvasRef"></canvas>
</div>

メリット:

確実にスタイルが適用される
ビルド時の依存がない
デバッグが容易

デメリット:

Tailwindのユーティリティクラスの一貫性から外れる

2. Tailwind設定の確認

tailwind.config.js の content 設定を確認：

export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './error.vue',
  ],
  // ...
}

3. 開発サーバーの再起動

キャッシュの問題の場合、開発サーバーを完全に再起動：

# プロセスを終了
taskkill //F //PID <PID>

# .nuxtディレクトリを削除（オプション）
rm -rf .nuxt

# 再起動
pnpm dev

4. カスタムクラスとして定義

頻繁に使用する場合は、tailwind.config.js でカスタムクラスとして定義：

theme: {
  extend: {
    height: {
      'chart': '600px',
    }
  }
}

<div class="relative h-chart w-full">
  <canvas ref="canvasRef"></canvas>
</div>

推奨される対応

プロジェクトの状況に応じて選択：

単発の使用: インラインスタイル
複数箇所で使用: カスタムクラス定義
動的な値: インラインスタイル + 変数