Vue3应用中如何动态修改Tailwind配置中预定义类的属性值

结论 #

• 直接修改tailwind.config.js的预配置值不可行：Tailwind的配置属于构建时静态资源，只会在项目编译打包阶段被读取生成对应的CSS类，打包后配置文件不会参与运行时逻辑，直接修改配置文件不会生效。
• 该需求可以通过CSS变量绑定Tailwind自定义主题的方式实现，不需要修改配置文件，运行时实时生效。

实现步骤 #

1. 调整Tailwind配置，将自定义颜色绑定CSS变量 #

修改你的tailwind.config.js中自定义颜色的取值，关联CSS变量，同时保留默认值：

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        // 自定义base颜色，绑定CSS变量--color-base，默认值为你原来的#6e0147
        base: 'var(--color-base, #6e0147)'
      }
    }
  },
  // 其余原有配置保持不变
}

注意：Tailwind内置有text-base字体大小类，如果你想把base作为颜色名使用，建议修改为不易冲突的名称比如primary-base，避免语义混淆。

2. 在Vue组件的mounted钩子中动态修改CSS变量 #

只需要修改对应的CSS变量取值，所有用到text-base（或你自定义的text-primary-base）的元素都会自动更新颜色：

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

// 如果需要仅修改当前组件内的base颜色，获取组件根元素
const componentRoot = ref()

onMounted(() => {
  // 全局生效：修改根节点的CSS变量，所有页面的text-base都会变
  document.documentElement.style.setProperty('--color-base', '#16a34a')

  // 仅当前组件生效：只修改当前组件根节点的CSS变量
  // componentRoot.value.style.setProperty('--color-base', '#16a34a')
})
</script>

<template>
  <div ref="componentRoot" class="text-base">
    这段文字的颜色会在mounted后自动切换为你设置的新值
  </div>
</template>

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