我读过几篇文章,讨论了类似的问题。我试过他们的解决方案,但似乎没有什么工作一贯为我工作。我正在构建一个进度条,我遇到的问题是我传递的宽度值似乎不起作用,它适用于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,现在它再次工作。但目前还不清楚为什么会导致这个问题。
1条答案
按热度按时间izkcnapc1#
我发现问题了。我需要像这样将
transition-width
添加到我的tailwind.config.js
文件中如果没有这种定制,tailwind将无法识别
transition-width
。