Next.js中Tailwind CSS自定义动画不生效问题咨询

你的问题出在自定义动画的配置方式上，Tailwind CSS的自定义动画需要在配置文件中注册，而非仅通过CSS的@theme定义。以下是正确的配置步骤：

1. 修改Tailwind配置文件 #

在项目根目录的tailwind.config.ts（或.js）中，扩展theme的keyframes和animation属性，注册你的自定义动画：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
    },
  },
  plugins: [],
};

2. 简化全局CSS文件 #

删除globals.css中的@theme块，只保留Tailwind的基础指令即可：

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 保持组件代码不变 #

你的组件代码无需修改，animate-wiggle类现在会被Tailwind正确识别并生成对应的动画样式：

import '@/app/globals.css';

const SomeComponent: React.FC = () => {
  return (
    <>
      <p className={'animate-bounce'}> This is animated with builtin tailwind utility </p>
      <p className={'animate-wiggle'}> This should be animated </p>
    </>
  );
};

export default SomeComponent;

原理说明 #

Tailwind的animate-*工具类是根据配置文件中theme.animation的定义生成的。之前仅用@theme定义CSS变量和关键帧，并没有让Tailwind将这些内容关联到工具类生成逻辑中，因此自定义动画无法生效。通过配置文件注册后，Tailwind会自动生成对应的animate-wiggle类，并关联你定义的关键帧和动画参数。

内容的提问来源于stack exchange，提问作者Pall Arpad