tailwind 与 framer motion 分层协作：前者管静态样式和基础过渡，后者控动态交互与时序；animate-类无法滚动触发，motion.div可混用tailwind类但需避冲突，自定义动画须用css变量支持duration类。
直接说结论：Tailwind 负责静态样式和基础过渡，Framer Motion 负责动态控制与复杂时序——两者不是替代关系，而是分层协作。硬用 Tailwind 写入场动画、滚动触发、或带物理参数的弹跳，会卡在配置死循环里；反过来，全靠 Framer Motion 手写 transform 和 opacity，又浪费了 Tailwind 的响应式类和原子化开发效率。
为什么不能只用 animate- 类做滚动触发动画
Tailwind 的 animate- 工具类本质是 CSS @keyframes + animation 声明，它一旦挂载就立即播放，无法感知滚动位置、视口进入、或用户交互节奏。你加了 animate-fade-in，但元素一加载就闪一下，根本等不到用户滚到那里。
- 真正需要的是「条件触发」：比如
useScroll监听yProgress，再用useTransform映射为 opacity 或 y 位移 -
animate-类不支持 delay 动态计算（比如每个卡片延迟 0.1s）、也不支持 repeat 反向镜像（repeatType="mirror"）这类 Framer Motion 独有的行为 - 浏览器不会报错，但你看到的“没动画”，其实是动画播完了回退（缺
forwards），或压根没注册进 CSS（tailwind.config.js里keyframes和animation没配对）
motion.div 里怎么安全混用 Tailwind 类
可以混，但必须注意 class 覆盖优先级和动画属性冲突。Tailwind 的 scale-110、opacity-50 是静态声明，而 motion.div 的 animate 属性会通过内联 style 覆盖它们——除非你显式禁用。
- 基础样式（如
bg-gray-100 p-6 rounded-xl）放心写在className里，它们不参与动画 - 避免在
className里写会和动画冲突的类：比如opacity-0+animate={{ opacity: 1 }}，后者会被覆盖；应统一交给 Framer Motion 控制 - 想让 hover 效果和 Framer Motion 共存？用
whileHover替代hover:scale-105，否则两个 scale 同时生效，结果不可控 - 响应式类（
md:w-1/2、lg:px-8）完全可用，Framer Motion 不干涉媒体查询逻辑
自定义动画怎么让 duration-300 生效
关键在 tailwind.config.js 里 theme.extend.animation 的值是否用了 CSS 变量。Tailwind 的 duration-* 类是通过 --tw-animation-duration 覆盖的，如果你的自定义动画写死时长，这个变量就无效。
- 错误写法：
spin-slow: 'spin-slow 2s linear infinite'→duration-300完全没反应 - 正确写法：
spin-slow: 'spin-slow var(--tw-animation-duration, 1s) linear infinite'→ 加上class="animate-spin-slow duration-300"就真变成 300ms - 别漏
forwards：比如slide-in: 'slide-in var(--tw-animation-duration, 0.4s) ease-out forwards'，否则动画播完立刻跳回初始状态 - 百分比帧必须加引号：
'0%': { transform: 'translateX(-100%)' }，写成0%:或0: {...}都会被 Tailwind 忽略
最容易被忽略的是：Framer Motion 的动画值（比如 y: 50）默认单位是 px，而 Tailwind 的 translate-y-4 是 rem。混用时别指望它们数值对得上；要精确对齐，要么全用 Framer Motion 的数字，要么用 useTransform 把 Tailwind 的 spacing scale 映射过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
