Tailwind CSS中hover:scale在<a>元素上不生效问题咨询
2026-8-12
解决Tailwind CSS中元素hover:scale不生效的问题
这不是Tailwind或Django的问题，是CSS本身的规则导致的：标签默认是行内元素（inline），而CSS的transform属性（Tailwind的scale-*类就是基于这个属性实现的）对行内元素不生效。而
是块级元素、![]()
是替换元素，transform对这两类元素天然支持，所以hover缩放能正常工作。
- 用
inline-block类，既保留行内元素的布局特性，又能支持transform：<a href="#" class="inline-block hover:scale-125 transition-all">你的链接文本</a> - 如果需要让链接占满父容器宽度，直接用
block类也行：<a href="#" class="block hover:scale-110 transition-all">你的链接文本</a>
另外建议加上transition-all类，让缩放效果更平滑，不然会显得很突兀。
内容的提问来源于stack exchange，提问作者bruceGGG
相关产品推荐
相关产品推荐
