背景
TailwindCSS 是近年来前端界非常流行的 CSS 框架之一，它提供了丰富的 CSS 样式和响应式设计模块，可以大幅度提高前端开发效率。但在实际使用中，我们可能会遇到一些问题，如 transition 动画不生效的情况。
问题描述
在 TailwindCSS 中，我们使用 transition 动画来实现某些效果时，可能会遇到动画不生效的情况。比如，我们使用如下代码来尝试实现一个按钮的 hover 效果：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Hover me </button>
预期效果是，当鼠标移动到按钮上时，它会有一个从蓝色到深蓝色的渐变效果。但实际情况是，鼠标移动到按钮上时，颜色会立即变为深蓝色，没有任何渐变效果。
分析原因
为什么会出现这种情况呢？这与 TailwindCSS 的工作原理密切相关。TailwindCSS 是一种「无样式」的 CSS 框架，它提供了大量的 utility class，可以让我们通过组合这些 class，快速地实现各种样式。然而，在这种模式下，我们使用的样式类都是独立的，它们之间并没有任何关联。因此，对于 transition 动画这种需要「状态转换」的效果，我们就需要另寻他法了。
处理方式
针对这种情况，我们可以借助 JavaScript 来实现 transition 动画效果，代码如下：
// javascriptcn.com 代码示例
<button id="btn" class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
Hover me
</button>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('mouseenter', () => {
btn.classList.remove('bg-blue-500');
btn.classList.add('bg-blue-700');
btn.style.transition = 'background-color 0.3s';
});
btn.addEventListener('mouseleave', () => {
btn.classList.remove('bg-blue-700');
btn.classList.add('bg-blue-500');
btn.style.transition = 'background-color 0.3s';
});
</script>这段代码首先去掉了按钮的背景色样式，然后添加了鼠标 hover 后的背景色样式，同时设置了 transition 动画的属性为「背景色在 0.3 秒内渐变」。当鼠标移开时，又将按钮的背景色还原，并添加了与鼠标 hover 前相同的 transition 动画。
此时，在浏览器中运行代码，我们会发现按钮在 hover 时会有一个从蓝色到深蓝色的渐变效果，正如我们所期望的那样。
总结
以上就是在 TailwindCSS 中处理 transition 动画不生效的方式了。虽然需要借助 JavaScript 进行动态样式操作，但这种方式也有其优势，如可以更灵活地控制动画效果。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654784197d4982a6eb1ddcca