😀

Nuxt UIのprimaryカラーをCSS内で階層指定する方法

に公開
個人開発
tech

Nuxt UIのprimaryカラーをCSS内で階層指定する方法

はじめに

こんにちは。個人開発でNuxt3を使ったWebアプリケーションを開発しているごんです。

この記事では、Nuxt UIのprimaryカラーをCSS内で呼び出す際の課題とその解決方法、そしてTailwindとCSS変数の違いについてまとめています。特にCSS内でprimary-400などの階層を利用する際にハマったので、その備忘録を残します。

課題：CSS内でprimaryの階層を呼び出せない

最初の試行錯誤

細かいCSSの設定が必要だったため、CSS内で--color-primary-400を呼ぼうとしましたが、反映されませんでした。

/* ❌ これは動作しない */
.my-element {
  background-color: var(--color-primary-400);
}

Nuxt UIのデフォルトCSS変数

調べてみると、Nuxt UIでは--color-primary（500番相当）のみが提供されていることがわかりました。

/* ✅ これは動作する（500番のみ） */
.my-element {
  background-color: var(--color-primary);
}

しかし、これでは400や600など他の階層は使用できませんでした。

解決方法：CSS変数の自前定義

1. CSS変数として階層を定義 + Tailwindユーティリティクラスとの併用

生成AIに相談したところ、必要な階層を自分でCSS変数として定義し、さらに@layer utilitiesを追加することで、CSS内での直接使用とTailwindクラスbg-primary-400の両方が可能になることがわかりました。

:root {
  /* Primary: 緑系統 */
  --color-primary-50: #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a; 
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;
}

@layer utilities {
  /* Primary */
  .bg-primary-400 { background-color: var(--color-primary-400); }
  .bg-primary-500 { background-color: var(--color-primary-500); }
  .bg-primary-600 { background-color: var(--color-primary-600); }
}

2. CSS内での使用

定義した変数をCSS内で直接使用できます。

/* ✅ 階層を自由に使用可能 */
.my-element {
  background-color: var(--color-primary-400); 
}

Tailwindクラスとの関係について

NuxtUIの自動クラス生成

ですが、、、@layer utilitiesを手動で定義する必要はありませんでした！！

NuxtUIはapp.config.tsでカラーを定義するだけで、自動的に以下のクラスを生成します：

  • bg-primary-400、bg-secondary-500、bg-accent-600等
  • text-primary-400、border-primary-500等

つまり、Tailwindの標準カラーと同様に、カスタムカラー名でも自動でクラスが使用可能です。

export default defineAppConfig({
  ui: {
    colors: {         
      primary: 'green',    // Tailwindのgreen色を使用
      secondary: 'amber',  // Tailwindのamber色を使用
      accent: 'purple',    // Tailwindのpurple色を使用
      gray: 'slate',
    },
    strategy: 'override' 
  }
})

nuxt.config.ts でのsafelist設定

export default defineNuxtConfig({
  ui: {
    global: true,
    safelistColors: ['primary', 'secondary', 'accent', 'slate'],
  }
})

safelistColorsの重要性：

  • TailwindのPurge保護: ビルド時に未使用CSS削除から色クラスを保護
  • 動的クラス生成: JavaScriptで動的に生成されるクラス名（bg-${colorName}-400等）を確実に保持
  • NuxtUI内部使用: NuxtUIコンポーネントが内部で使用する色クラスの保護

例：以下のような動的色指定が確実に動作します

<script setup>
const getButtonColor = (type) => `bg-${type}-500` // bg-primary-500等
</script>
<template>
  <div :class="getButtonColor('primary')">動的カラー</div>
</template>

<template>
  <!-- ✅ 標準Tailwindクラス（緑色） -->
  <div class="bg-green-400 text-white">標準の緑色</div>
  
  <!-- ✅ カスタムクラス（primary色） -->
  <div class="bg-primary-400 text-white">プライマリ色</div>
  
  <!-- ✅ CSS内でのカスタム変数 -->
  <div class="custom-style">カスタムスタイル</div>
</template>

<style>
.custom-style {
  background-color: var(--color-primary-400);
  border: 2px solid var(--color-secondary-500);
}
</style>

TailwindとCSS変数の違い

呼び出し方法 primary-400 primary-500 primary-600
Tailwindクラス ✅ bg-primary-400
（NuxtUI自動生成）		 ✅ bg-primary-500
（NuxtUI自動生成）		 ✅ bg-primary-600
（NuxtUI自動生成）
Nuxt UI デフォルトCSS変数 ❌ 存在しない ✅ var(--color-primary) ❌ 存在しない

ポイント

  • Tailwindクラス: NuxtUIがapp.config.tsの設定から自動生成（手動定義不要）
  • Nuxt UI デフォルト: CSS変数として呼べるのは500番のみ（--color-primary）
  • 階層使用: 400や600をCSS内で使いたい場合は、自分で変数を定義する必要がある

まとめ

解決できたこと

  • CSS内でprimary-400を直接呼べなかった問題を、自前のCSS変数定義で解決
  • NuxtUIの自動クラス生成機能により、Tailwindクラス（bg-primary-400等）が自動で使用可能
  • テンプレートとCSSの両方で統一されたカラーシステムを構築

学んだポイント

  1. Nuxt UIのデフォルト制限: CSS変数は500番（--color-primary）のみ提供
  2. 階層使用の要件: 400や600など他の階層を使うには自前のCSS変数定義が必要
  3. NuxtUIの自動機能: app.config.tsでカラーを定義すれば、Tailwindクラスは自動生成される
  4. @layer utilitiesは不要: 手動でTailwindクラスを定義する必要はない
  5. safelistColorsの重要性: 動的クラス生成とPurge保護のため必須設定
  6. シンプルな解決策: CSS変数定義 + NuxtUIの自動機能 + safelist設定の組み合わせが最適

参考リンク

Discussion