在Vue3/Nuxt3中基于用户输入动态修改TailwindCSS主题色

问题 #

我正在实现让用户自定义网站主色的功能，希望在Tailwind类中使用bg-primary-600而非硬编码颜色，以便primary值变化时同步更新样式。目前无法实现Tailwind颜色的动态修改，虽然能硬编码值，但无法将其绑定到响应式变量实现更新。需要让myColor这个ref更新Tailwind中的primary颜色，且要求全局生效，所有页面和组件中引用primary的地方都能同步更新。

核心代码如下：

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');

module.exports = {
  darkMode: 'class',
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
  ],
  theme: {
    extend: {
      colors: {
        // 此处需由用户自定义而非硬编码
        primary: colors.blue,
      },
    },
  },
};

app.vue #

<template>
  <div>
    <div class="bg-red-600 h-16 mb-4">HELLO WORLD</div>
    <div class="bg-primary-600 h-16 mb-4">HELLO WORLD</div>
    <button class="bg-blue-200 rounded-lg p-4 mx-2" @click="myColor = 'blue'">
      Blue
    </button>
    <button class="bg-green-200 rounded-lg p-4" @click="myColor = 'green'">
      Green
    </button>
    <body class="mx-2">
      My color is: {{ myColor }}
    </body>
  </div>
</template>

<script setup>
const myColor = ref('orange');
</script>

解决方案 #

Tailwind的配置是构建阶段生成的，无法在运行时直接修改，需通过CSS变量+Tailwind映射的方式实现动态主色：

1. 配置Tailwind使用CSS变量定义primary色系 #

修改tailwind.config.js，将primary的所有色阶映射到自定义CSS变量：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'var(--primary-50)',
          100: 'var(--primary-100)',
          200: 'var(--primary-200)',
          300: 'var(--primary-300)',
          400: 'var(--primary-400)',
          500: 'var(--primary-500)',
          600: 'var(--primary-600)',
          700: 'var(--primary-700)',
          800: 'var(--primary-800)',
          900: 'var(--primary-900)',
        },
      },
    },
  },
};

2. 定义颜色映射表，对应Tailwind内置色阶 #

在app.vue（或全局状态管理文件）中，定义支持的主色及其完整色阶：

const colorMap = {
  blue: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
  },
  green: {
    50: '#f0fdf4',
    100: '#dcfce7',
    200: '#bbf7d0',
    300: '#86efac',
    400: '#4ade80',
    500: '#22c55e',
    600: '#16a34a',
    700: '#15803d',
    800: '#166534',
    900: '#14532d',
  },
  orange: {
    50: '#fff7ed',
    100: '#ffedd5',
    200: '#fed7aa',
    300: '#fdba74',
    400: '#fb923c',
    500: '#f97316',
    600: '#ea580c',
    700: '#c2410c',
    800: '#9a3412',
    900: '#7c2d12',
  },
};

3. 绑定响应式变量，动态更新CSS变量 #

修改app.vue，监听myColor的变化，实时更新根元素的CSS变量：

<template>
  <div>
    <div class="bg-red-600 h-16 mb-4">HELLO WORLD</div>
    <div class="bg-primary-600 h-16 mb-4">HELLO WORLD</div>
    <button class="bg-blue-200 rounded-lg p-4 mx-2" @click="myColor = 'blue'">
      Blue
    </button>
    <button class="bg-green-200 rounded-lg p-4" @click="myColor = 'green'">
      Green
    </button>
    <div class="mx-2">
      My color is: {{ myColor }}
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

const myColor = ref('orange');

const colorMap = {
  blue: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
  },
  green: {
    50: '#f0fdf4',
    100: '#dcfce7',
    200: '#bbf7d0',
    300: '#86efac',
    400: '#4ade80',
    500: '#22c55e',
    600: '#16a34a',
    700: '#15803d',
    800: '#166534',
    900: '#14532d',
  },
  orange: {
    50: '#fff7ed',
    100: '#ffedd5',
    200: '#fed7aa',
    300: '#fdba74',
    400: '#fb923c',
    500: '#f97316',
    600: '#ea580c',
    700: '#c2410c',
    800: '#9a3412',
    900: '#7c2d12',
  },
};

// 更新根元素CSS变量的函数
const updatePrimaryColors = (colorKey) => {
  const colors = colorMap[colorKey];
  if (!colors) return;
  Object.entries(colors).forEach(([shade, hex]) => {
    document.documentElement.style.setProperty(`--primary-${shade}`, hex);
  });
};

// 初始化时设置默认颜色
onMounted(() => {
  updatePrimaryColors(myColor.value);
});

// 监听颜色变化，实时同步更新
watch(myColor, (newColor) => {
  updatePrimaryColors(newColor);
});
</script>

4. 全局生效说明 #

由于CSS变量设置在根元素document.documentElement上，所有使用primary色系的Tailwind类（如bg-primary-600、text-primary-500等）都会自动继承变量值，实现全局同步更新。

内容的提问来源于stack exchange，提问作者Taylor Finklea