Tailwind CSS v4.0.5 中 @keyframes 动画的 CSS 变量丢失问题解析

在 Tailwind CSS v4.0.5 版本中，开发者报告了一个关于 CSS 变量在 @keyframes 动画中丢失的问题。这个问题主要出现在使用 CSS 自定义属性（CSS 变量）结合 @property 规则和 @keyframes 动画时。

问题现象

当开发者尝试在 Tailwind 主题配置中定义如下动画时：

@property --angle {
  inherits: true;
  initial-value: 0deg;
  syntax: '<angle>';
}

@theme {
  --animate-rotate-angle: rotate-angle 2s infinite linear;
  
  @keyframes rotate-angle {
    to {
      --angle: 360deg;
    }
  }
}

生成的 CSS 输出中，@keyframes 规则内的 CSS 变量会被意外移除，导致动画无法正常工作：

@keyframes rotate-angle {
  to {
    /* 这里本应包含 --angle: 360deg; */
  }
}

技术背景

这个问题涉及到几个现代 CSS 特性：

1. CSS @property 规则：允许开发者显式定义 CSS 自定义属性，指定其类型、初始值和继承行为
2. CSS 变量动画：通过 @keyframes 改变 CSS 变量的值，可以实现复杂的动画效果
3. Tailwind 的 CSS 处理流程：Tailwind 会对 CSS 进行优化处理，有时会移除它认为"未使用"的样式

问题原因

在 Tailwind CSS v4.0.5 中，CSS 处理流程中的一个优化步骤错误地将 @keyframes 中的 CSS 变量标记为"未使用"并移除。这是因为：

1. 优化器没有正确识别 @property 定义的变量与 @keyframes 中使用的变量之间的关联
2. 对于动画中使用的 CSS 变量，没有建立正确的依赖关系跟踪

解决方案

Tailwind 团队迅速响应并采取了以下措施：

1. 在 v4.0.6 版本中暂时回滚了导致问题的变更
2. 计划在未来版本中重新实现该功能，但会确保正确处理 CSS 变量

对于开发者来说，解决方案很简单：

• 升级到 Tailwind CSS v4.0.6 或更高版本
• 如果必须使用 v4.0.5，可以考虑将关键动画定义移到 Tailwind 处理流程之外

最佳实践

为了避免类似问题，建议开发者：

1. 对于复杂的 CSS 动画，特别是涉及 CSS 变量的，考虑单独维护这部分样式
2. 定期更新 Tailwind CSS 到最新稳定版本
3. 在使用新 CSS 特性时，先在简单环境中测试其与 Tailwind 的兼容性

总结

这个问题展示了现代 CSS 特性与工具链优化之间可能存在的冲突。Tailwind 团队的处理方式也体现了他们对开发者体验的重视，通过快速响应和透明沟通解决了问题。对于依赖 CSS 变量动画的项目，保持 Tailwind 版本更新是确保稳定性的关键。