我用Tailwind在Next上建立了一个单页的投资组合网站，一切都很完美。我想加第二页。
我在pages目录中添加了一个文件，并引用了一个新组件。我的内容可以使用页面路由访问，但没有应用任何样式。
为什么会这样？我该如何修复它？
值得注意的是MovieAPI.tsx是pages目录中唯一的文件。
tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ]

pages>MovieAPI.tsx：

"use client"
import React from "react";
import MovieAPISection from "@/components/MovieAPISection"

function MovieApi() {
    return <MovieAPISection></MovieAPISection>
}

export default MovieApi

components> MovieAPI Section.tsx：

import React from 'react'
import Image from 'next/image'

const MovieAPISection = () => {
  return (
    <section id="MovieAPISection">
          <div className="my-12 pb-12 md:pt-16 md:pb-48">
                <h1 className="text-center font-bold text-4xl">Movie API Project
                    <hr className="w-6 h-1 mx-auto my-4 bg-teal-500 border-0 rounded" />
                </h1>
          </div>
    </section>
      
  )
}

export default MovieAPISection