reactjs 动态顺风宽度类在react组件中不一致

xn1cxnb4  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(198)

我读过几篇文章,讨论了类似的问题。我试过他们的解决方案,但似乎没有什么工作一贯为我工作。我正在构建一个进度条,我遇到的问题是我传递的宽度值似乎不起作用,它适用于w-0,w-1/4,但之后当我传递w-2/4或w-3/4时,它开始表现得好像我设置了宽度满。我已经做了所有的测试,看看我是否传递了正确的值,我已经硬编码的类,以确保值将按照预期的行为,他们这样做。我甚至将这些类添加到我的tailwind.config.js文件safelist中:

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-full'。有什么我错过了顺风类,可能会导致这个问题?此外,当我最初实现这一点,它是工作完美的罚款,我创造了一个记录,所以我有证据我不疯了。但之后就不管用了。为什么会这样?
更新:我从类中删除了transition-width和duration-500,现在它再次工作。但目前还不清楚为什么会导致这个问题。

izkcnapc

izkcnapc1#

我发现问题了。我需要像这样将transition-width添加到我的tailwind.config.js文件中

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

如果没有这种定制,tailwind将无法识别transition-width

相关问题