如何在Nuxt.js+Tailwind中直接将JSON变量传入DIV的class属性

你的写法存在语法错误，且 Tailwind 对纯动态生成的类名支持有限，以下是几种可行的实现方案：

方案一：模板字符串绑定类名 #

注意要确保颜色值为合法格式（比如补全十六进制的前导#），同时 Nuxt 3 推荐使用 <script setup> 语法：

<template>
  <!-- 用模板字符串拼接合法的 Tailwind 颜色类 -->
  <div :class="`bg-[#${color}]`"></div>
</template>

<script setup>
// 定义颜色变量，注意补全为6位十六进制值
const color = '123456'
</script>

方案二：自定义 Tailwind 属性（更稳定） #

先在 tailwind.config.js 中配置自定义颜色属性：

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        dynamic: 'var(--dynamic-color)'
      }
    }
  }
}

再在组件中通过绑定 style 动态赋值：

<template>
  <div class="bg-dynamic" :style="{ '--dynamic-color': `#${color}` }"></div>
</template>

<script setup>
const color = '123456'
</script>

关键注意点 #

• Tailwind 不会编译完全动态生成的类名，生产环境要确保组件文件被包含在 tailwind.config.js 的 content 配置中，让 Tailwind 能扫描到相关类名。
• 颜色值必须是 Tailwind 支持的格式，比如6位十六进制、RGB、HSL等，示例中的12345不是合法颜色值，需要补全为6位（如123456）。

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