Vue.js 3 + Tailwind CSS：RatingBar组件动态宽度渲染异常求助

问题场景 #

开发RatingBar组件时，通过模板字符串动态绑定宽度类（如w-[75%]），DevTools中能看到类名已添加，但元素实际宽度始终为100%。静态宽度类可正常渲染，动态表达式:class="w-[${Math.floor(genre.rating * 10)}%]"无效。

组件代码（RatingBar.vue） #

<template>
  <div class="my-2 grid grid-cols-3 items-center">
    <span class="text-left text-sm">{{ genre.name }}</span>

    <div class="h-2 flex-1 rounded-lg bg-gray-800">
      <div
        class="h-full rounded-lg bg-secondary"
        :class="`w-[${Math.floor(genre.rating * 10)}%]`"
      ></div>
    </div>
    <div class="ml-2 flex flex-row items-center gap-1 text-sm text-gray-600">
      <i class="fa-regular fa-star"></i>
      <span class="flex flex-row gap-1">
        <span>
          {{ genre.rating }}
        </span>
        <span> ({{ genre.count }}) </span>
      </span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  genre: {
    type: Object,
    required: true,
  },
})
</script>

渲染后的HTML #

<div class="h-full rounded-lg bg-secondary w-[75%]"></div>

package.json 依赖 #

{
  "name": "project_name",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "firebase": "^9.22.1",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.5"
  }
}

核心原因 #

Tailwind CSS的JIT编译器只能检测构建时明确存在的类名，动态拼接的类名（如模板字符串生成的w-[${xxx}%]）会被编译器忽略，导致对应的CSS规则未生成。此时元素会继承父容器（flex-1的div）的宽度，表现为100%。

解决方法 #

1. 内联样式绑定（推荐） #

直接通过:style绑定宽度，绕过Tailwind的类检测限制：

<div
  class="h-full rounded-lg bg-secondary"
  :style="{ width: `${Math.floor(genre.rating * 10)}%` }"
></div>

这种方式简单直接，完全适配动态计算场景，无需修改Tailwind配置。

2. 显式声明所有可能的宽度类 #

如果genre.rating的取值范围有限（比如0-10，间隔10%），可以在组件中显式列出所有可能的宽度类，让Tailwind编译时检测到：

<!-- 用隐藏元素声明所有可能的类，不影响页面渲染 -->
<div class="hidden w-[0%] w-[10%] w-[20%] w-[30%] w-[40%] w-[50%] w-[60%] w-[70%] w-[80%] w-[90%] w-[100%]"></div>

<!-- 原动态绑定代码不变 -->
<div
  class="h-full rounded-lg bg-secondary"
  :class="`w-[${Math.floor(genre.rating * 10)}%]`"
></div>

3. 自定义Tailwind工具类 #

在tailwind.config.js中扩展主题，定义支持动态百分比的宽度类：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      width: {
        'rating': (val) => `${val}%`,
      },
    },
  },
  plugins: [],
}

然后组件中使用：

<div
  class="h-full rounded-lg bg-secondary"
  :class="`w-rating-[${Math.floor(genre.rating * 10)}]`"
></div>

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