我讀過(guò)幾篇解決類(lèi)似問(wèn)題的文章。我試過(guò)他們的解決方案，但似乎沒(méi)有一樣對(duì)我有效。 我正在創(chuàng)建一個(gè)進(jìn)度條，我遇到的問(wèn)題是我為寬度傳遞的值似乎不起作用，它對(duì)w-0，w-1/4有效，但之后當(dāng)我傳入w-2/4或w-3/ 4時(shí)，它開(kāi)始表現(xiàn)得好像我設(shè)置了全寬。我做了所有的測(cè)試，看看我是否傳入了正確的值，我硬編碼了這個(gè)類(lèi)，以確保值的行為符合預(yù)期，它們確實(shí)如此。我甚至將這些類(lèi)添加到我的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'],
...
}

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

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>
  );

分?jǐn)?shù)將始終等于“w-0”、“w-1/4”、“w-2/4”、“w-3/4”或“w-滿(mǎn)”。 是不是我遺漏了什么關(guān)于順風(fēng)職業(yè)的東西導(dǎo)致了這個(gè)問(wèn)題？ 此外，當(dāng)我最初實(shí)現(xiàn)它時(shí)，它工作得非常好，我創(chuàng)建了一個(gè)記錄，所以我有證據(jù)證明我沒(méi)有瘋。但是之后它就停止工作了。為什么會(huì)這樣？

更新:我從類(lèi)中移除了過(guò)渡寬度和持續(xù)時(shí)間-500，現(xiàn)在它又開(kāi)始工作了。但是不清楚為什么會(huì)導(dǎo)致這個(gè)問(wèn)題。

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

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

如果沒(méi)有此自定義，順風(fēng)將無(wú)法識(shí)別過(guò)渡寬度。