TailwindCSS v4定义多自定义动画失效求助（Next.js v15.0.4）

你的代码存在几处语法错误，导致自定义动画无法正常生效，以下是修正方案：

问题点梳理 #

• 自定义动画变量末尾缺少分号，CSS语法要求每个声明必须以分号结尾
• @keyframes 使用了错误的数组包裹语法，Tailwind v4 的 @theme 中不需要用方括号和逗号分隔多个关键帧定义
• 关键帧定义的格式有误，正确的 @keyframes 无需额外括号包裹

修正后的 globals.css 代码 #

@theme {
  --animate-float: float 4s infinite;
  --animate-wiggle: wiggle 1s infinite;

  @keyframes wiggle {
    0% { 
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(3deg);
    }
  }

  @keyframes float {
    0% { 
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
    }
  }
}

使用说明 #

保持 ShoeDetail.tsx 中的代码不变，重新启动 Next.js 开发服务后，animate-wiggle 和 animate-float 类都会正常生效，且能在可用动画列表中显示。

注：若修改后仍不生效，可尝试清除 Tailwind 缓存并重启开发服务，确保样式被正确编译。

内容的提问来源于stack exchange，提问作者Chris Hunter-Johnson