必须添加transform类启用变换上下文，否则rotate-和scale-类因独立声明相互覆盖而失效；正确写法为transform rotate-45 scale-125，且需配合transition-transform实现平滑动画。
直接加 rotate-45 和 scale-125 不会同时生效——Tailwind 的 transform 类必须共存于同一元素，且需显式启用变换上下文，否则浏览器忽略部分或全部效果。
为什么 rotate + scale 一起写却只转不缩，或只缩不转？
根本原因是 Tailwind 的 rotate- 和 scale- 类都依赖 transform 属性，而它们生成的 CSS 是独立声明，后写的会覆盖前写的（比如 scale-125 生成 transform: scale(1.25)，覆盖掉前面 rotate-45 的 transform: rotate(45deg)）。
- 必须同时添加
transform类作为“开关”，否则所有 rotate/scale 类都不起作用 - 正确写法示例：
transform rotate-45 scale-125（顺序无关，Tailwind 会合并为单条transform: rotate(45deg) scale(1.25)） - 漏掉
transform类是实际项目里最常踩的坑，DevTools 里看 computed 样式会发现根本没有transform声明
hover 或 active 状态下同时旋转+缩放怎么写？
状态变体（如 hover:、active:）必须和基础类共用 transform，且过渡类不能省略，否则是瞬变而非动画。
- 基础组合：
transform transition-transform duration-300 hover:rotate-180 hover:scale-110 - 移动端点击反馈要防卡住：
active:rotate-12 active:scale-95+ 全局重置*:active { transform: none; } - 别用
transition-all——它会尝试过渡所有属性，可能触发 layout，导致缩放抖动 - 如果想让旋转中心和缩放中心一致，加
origin-center（默认就是 center，但显式写更稳妥）
需要非预设角度或缩放比例（比如 rotate-37deg、scale-1.37）怎么办？
Tailwind 默认不生成 rotate-37 或 scale-[1.37] 这类值，强行写会静默失效，必须启用 JIT 模式并配置 content 扫描，或改用方括号语法。
- 合法自定义写法：
rotate-[37deg]、scale-[1.37]（注意中括号内不能有空格） - 前提：tailwind.config.js 中
content必须包含该文件路径，否则 JIT 编译时不会生成对应 CSS - 不推荐在 HTML 中大量写方括号语法——维护困难，且无法被 PurgeCSS 安全识别
- 高频使用的非标值（如
scale-137），建议在theme.extend.scale中注册为命名工具类
SVG 或图标元素上同时 rotate + scale 容易出什么问题？
SVG 默认是 display: inline，且自身有 viewBox 坐标系，叠加 transform 时容易出现视觉偏移、旋转轴心漂移或动画卡顿。
- 必须加
inline-block或block，否则transform被忽略 - 确保
width和height与viewBox比例一致，例如width="24" height="24" viewBox="0 0 24 24" - 避免 SVG 内联
transform属性（如<g transform="rotate(10)"></g>），会和 Tailwind 的rotate-叠加造成意外结果 - 复杂动效（如旋转中缩放+位移）建议退回到手写
style="transform: rotate(10deg) scale(1.2) translateX(4px)"，Tailwind 工具类在此场景下扩展成本高
真正难的不是“怎么写出来”，而是判断该用工具类还是手写 style：当组合超过两个 transform 函数、或涉及动态数值、或需要精确控制 origin 位置时，Tailwind 的语义化优势迅速衰减，此时直接写内联 transform 更快更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
