我讀過幾篇解決類似問題的文章。我試過他們的解決方案，但似乎沒有一樣對我有效。 我正在創建一個進度條，我遇到的問題是我為寬度傳遞的值似乎不起作用，它對w-0，w-1/4有效，但之后當我傳入w-2/4或w-3/ 4時，它開始表現得好像我設置了全寬。我做了所有的測試，看看我是否傳入了正確的值，我硬編碼了這個類，以確保值的行為符合預期，它們確實如此。我甚至將這些類添加到我的tailwind.config.js文件安全列表中:

module.exports = {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  safelist: ['w-0', 'w-1/4', 'w-2/4', 'w-3/4', 'w-full'],
...
}

但是由于某種原因，我不知道順風忽略了我的寬度值。這是我的組件:

return (
    <div className={`my-4 h-2.5 w-full rounded-full ${backgroundColor}`}>
      <div className={`${fraction} transition-width h-2.5 rounded-full duration-500 ${progressColor} `}></div>
    </div>
  );

分數將始終等于“w-0”、“w-1/4”、“w-2/4”、“w-3/4”或“w-滿”。 是不是我遺漏了什么關于順風職業的東西導致了這個問題？ 此外，當我最初實現它時，它工作得非常好，我創建了一個記錄，所以我有證據證明我沒有瘋。但是之后它就停止工作了。為什么會這樣？

更新:我從類中移除了過渡寬度和持續時間-500，現在它又開始工作了。但是不清楚為什么會導致這個問題。

我找到問題了。 我需要將過渡寬度添加到我的tailwind.config.js文件中，如下所示

module.exports = {
...
transitionProperty: {
         'width': 'width',
        }
}

如果沒有此自定義，順風將無法識別過渡寬度。