rotate类生效需先使元素触发变换上下文，如设inline-block；合法值含rotate-0/45/90/135/180及负角度方括号语法；静态旋转用rotate-*，动画用animate-spin并确保display适配。
rotate类怎么写才生效
直接加 rotate-45 没反应？大概率是元素没触发“变换上下文”。rotate- 系列类本质是 transform: rotate(...)，但默认情况下，inline 元素（比如 span、a）不支持 transform，必须先让它变成块级或行内块级。
- 给元素加
inline-block或block（比如inline-block rotate-45） - 确保没有其他 CSS 覆盖了
transform，比如父级设置了transform: none或用了!important冲突 - 旋转中心默认是元素中心（
transform-origin: center），如果想改，得额外加origin-center/origin-top-left等类
rotate参数有哪些合法值
Tailwind 默认只提供离散角度：从 rotate-0 到 rotate-180，步长 90；还有 rotate-45、rotate-90、rotate-135、rotate-180，以及负值如 rotate-[-45deg]（需启用 JIT 模式并配置 content 扫描）。
-
rotate-0→transform: rotate(0deg) -
rotate-90→transform: rotate(90deg) - 自定义角度必须用方括号语法：
rotate-[-12.5deg]，否则编译不进 CSS - 别写
rotate-30这种——Tailwind 默认不生成，会静默失效
动画旋转时卡顿或闪动怎么办
单纯加 rotate-45 是静态的；要做持续旋转动画，得配合 animate-spin。但它有隐含前提：这个类依赖 transform + animation，而某些场景下会出问题。
- 如果元素有
will-change: transform，可能引发渲染层切换异常，导致边缘锯齿或闪烁 - 在 Safari 上，
animate-spin对inline元素支持不稳定，务必加inline-block或flex - 想控制速度或方向？得自己写 @keyframes，
animate-spin是固定 1s/rev、顺时针，不可配置 - 替代方案：
animate-[spin_2s_linear_infinite]（需在theme.animation中扩展）
rotate和transform-gpu的关系
移动端或复杂动画中，有人会手动加 transform: rotate(...) translateZ(0) 强制 GPU 加速。Tailwind 默认不加 translateZ(0)，所以 rotate- 类纯走 CPU 合成，滚动中旋转可能掉帧。
- 不需要强行加
translateZ(0)—— 现代浏览器对rotate已自动升格到 GPU 层，除非你测出明显卡顿 - 真要加，得自定义工具类，比如
rotate-gpu-45，对应transform: rotate(45deg) translateZ(0) - 注意：滥用
translateZ(0)可能增加图层数量，反而拖慢性能，尤其在低端安卓机上
实际项目里最常漏的是 inline 元素没设 display 类型，以及想当然用 rotate-30 却没配 JIT 的自定义值支持——这两处一错，旋转就彻底“看不见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
