Vue、Nuxt中动态生成Tailwind类无效的替代解决方案

因为Tailwind的JIT编译器只会在构建阶段扫描代码中明确写出的类，动态拼接的类（比如w-[${progressValue}]）不会被识别生成样式，所以可以用以下几种方案解决：

方案一：使用内联样式（最推荐） #

直接通过:style绑定动态宽度，跳过Tailwind的类扫描限制，这是最适合动态进度值的场景：

<script setup>
const items = [...] // API返回的数据
</script>

<template>
  <div v-for="item in items" class="bg-red-500">
    <p class="bg-green-500" :style="{ width: `${item.progressValue}%` }" />
  </div>
</template>

如果你的进度值已经带单位（比如'50%'），直接写:style="{ width: item.progressValue }"即可。

方案二：预定义进度区间类 #

如果想继续使用Tailwind的类，可以根据业务需求预定义几个进度区间，通过判断进度值返回对应的预定义类（这些类会被Tailwind扫描到并生成样式）：

<script setup>
const items = [...] // API返回的数据

const getProgressClass = (value) => {
  if (value <= 25) return 'w-1/4';
  if (value <= 50) return 'w-1/2';
  if (value <= 75) return 'w-3/4';
  return 'w-full';
};
</script>

<template>
  <div v-for="item in items" class="bg-red-500">
    <p class="bg-green-500" :class="getProgressClass(item.progressValue)" />
  </div>
</template>

这种方式适合进度不需要精确到百分比的场景，优势是能利用Tailwind的响应式等特性。

方案三：自定义Tailwind工具类（进阶） #

如果需要精确的动态宽度且想保留Tailwind的语法，可以在tailwind.config.js中自定义一个接受参数的工具类：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        'dynamic': 'var(--dynamic-width)'
      }
    }
  }
}

然后在模板中通过CSS变量传递动态值：

<script setup>
const items = [...] // API返回的数据
</script>

<template>
  <div v-for="item in items" class="bg-red-500">
    <p class="bg-green-500 w-dynamic" :style="{ '--dynamic-width': `${item.progressValue}%` }" />
  </div>
</template>

这种方式兼顾了Tailwind的类语法和动态值需求，但需要额外配置Tailwind。

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