我用的是Vue.js 3和Tailwind CSS。我有一個名為RatingBar的組件，我試圖將一個動態寬度值應用于父元素的類。然而，即使我可以在DevTools中看到所需的寬度，它也會將寬度渲染為100%。

下面是我的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輸出在& ltdiv & gt：

<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"
  }
}

你能幫我解決這個問題嗎？

我嘗試在RatingBar組件中使用靜態寬度值，它可以正確呈現。然而，當我試圖通過使用表達式:class = & quotw-[$ { math . floor(genre . rating * 10)} %]& quot；，渲染沒有按預期進行。它總是以100%的寬度渲染，而不是應用計算的寬度。

我希望具有bg-secondary類的div元素的寬度對應于根據genre.rating值計算出的百分比。例如，如果genre.rating為7.5，則寬度應為75%。

盡管在DevTools中驗證了寬度值，但呈現的HTML輸出始終將寬度顯示為100%，而不管實際計算的值。

對于如何解決這個問題以及如何讓動態寬度在RatingBar組件中正確呈現，我將不勝感激。

根據文件:

關于Tailwind如何提取類名，最重要的一點是，它只會找到在源文件中作為完整的完整字符串存在的類。

如果使用字符串插值或將部分類名連接在一起，Tailwind將找不到它們，因此不會生成相應的CSS:

不要動態構造類名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的例子中，字符串text-red-600和text-green-600不存在，所以Tailwind不會生成這些類。 相反，請確保您使用的所有類名都完整存在:

總是使用完整的類名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

相反，您可以使用style屬性來設置寬度:

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