Reactjs 无法使用导入apppage.jsx的组件中的tailwind 类文本操作和自定义动画

问题出在font-bold text-4xl, animate-waving-hand类和其他文本操作类，如leadinf-[1.8] md:leading-loose.请勿在Home零部件中工作.但是，当将类名添加到app/page.jsx中的主页组件时，类处于活动状态并且可以正常工作.代码如下所示

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&apos;m Alil</h1>
          <div className="ml-1 animate-waving-hand">👋</div>
        </div>
      </div>
    </>
  )
}

但当使用像代码这样的组件时，我预计这不会起作用

这是app/page.jsx code美元

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&apos;m Alil</h1>
          <div className="ml-1 animate-waving-hand">👋</div>
        </div>
      </div>
    </>
  )
}

代码有什么问题？我非常困惑，花了15个小时试图修复它.这是我项目的GitHub资源库 https://github.com/allail-qadrillah/Portofolio/blob/master/app/page.jsx个