Next.js中Home组件内Tailwind CSS类及自定义动画失效问题

问题现象 #

• Tailwind CSS文本操作类（如font-bold、text-4xl）、自定义动画类animate-waving-hand以及leading-[1.8]、md:leading-loose这类间距类，写在Home组件内部时完全失效
• 将这些类名添加到app/page.jsx的HomePage组件或其内部元素上时，样式与动画均可正常生效

代码示例 #

正常生效场景（app/page.jsx） #

import Home from "@/modules/home"
export default async function HomePage() {
  return (
    <>
      <Home className="font-bold text-4xl animate-waving-hand" />
      <div>
        <div className='flex gap-2 font-bold text-4xl'>
          <h1> Hi, I'm Alil</h1>
          <div className="ml-1 animate-waving-hand">👋</div>
        </div>
      </div>
    </>
  )
}

失效场景（app/page.jsx） #

import Home from "@/modules/home/components/Home.jsx"
export default async function HomePage() {
  return (
    <>
      <Home />
    </>
  )
}

modules/home/index.js #

import Home from "./components/Home";
export default Home

modules/home/components/Home.jsx #

import Link from "next/link"
import { TbCoffee } from 'react-icons/tb'
export default function Home() {
  return (
    <>
      <div>
        <div className='flex gap-2 font-bold text-4xl'>
          <h1> Hi, I'm Alil</h1>
          <div className="ml-1 animate-waving-hand">👋</div>
        </div>
      </div>
    </>
  )
}

排查方向与可能原因 #

1. Tailwind配置的内容路径遗漏
   检查tailwind.config.js中的content数组，确认是否包含./modules/**/*.{js,ts,jsx,tsx,mdx}这类路径。如果Tailwind没有扫描到modules/home/components/Home.jsx文件，就不会生成对应样式类，导致失效。正确配置需覆盖所有组件文件所在目录。

2. 自定义动画配置缺失
   确认tailwind.config.js的theme.extend中是否正确定义了animate-waving-hand对应的动画和关键帧。若未配置自定义动画，即使类名正确也不会生效。

3. 文件路径大小写不匹配
   部分操作系统（如Linux/macOS）对文件名大小写敏感，检查Home.jsx的文件名大小写与导入路径是否完全一致，路径大小写错误可能导致组件未被Tailwind正确扫描。

4. Next.js缓存干扰
   删除.next文件夹后重启开发服务器，或执行npm run build重新构建项目。开发环境的缓存可能导致样式未及时更新。

内容的提问来源于stack exchange，提问作者M. Al lail Qadrillah