Next.js14 App Router硬刷新后Tailwind CSS样式失效问题求助

在使用 App Router 的 Next.js 14 项目中，导航至其他路由返回首页后，硬刷新浏览器时页面的 Tailwind CSS 样式完全不生效。已尝试在首页添加 'use client' 标记改为客户端组件，但问题依旧存在。

环境版本：

• Next.js 14.2.11
• Tailwind CSS 3.4.12
• Node.js 20.10.0

相关代码文件：

src/app/page.tsx #

'use client'

import Footer from "@/components/footer/Footer";
import Header from "@/components/header/Header";
import { GET_All_Courses } from "@/server/API";
import GCard from "@/components/Card/GCard";
import Link from "next/link";
import { COURSES } from "@/server/models/course";

async function CourseList() {
    try {
        const courses = await GET_All_Courses();

        if (!courses || courses.length === 0) {
            return <h1>No courses found</h1>;
        }

        return (
            <div className="flex flex-wrap gap-4">
                {courses.map((course: COURSES) => (
                    <Link key={course.ID} href={`/course/${course.ID}`}>
                        <div className="hover:cursor-pointer">
                            <GCard course={course} />
                        </div>
                    </Link>
                ))}
            </div>
        );
    } catch (error) {
        console.error('Error in CourseList:', error);
        return <div>Error loading courses. Please try again later.</div>;
    }
}

export default async function Home() {
    return (
        <>
            <Header />
            <div className="bg-[#F6FCFF] p-4">
                <CourseList />
            </div>
            <Footer />
        </>
    );
}

src/app/layout.tsx #

import "./globals.css";

import { Providers } from "@/context/providers";
import type { Metadata } from "next";
import { Almarai } from "next/font/google";
import { Suspense } from "react";
import Loading from "./loading";

const almarai = Almarai({
  subsets: ['arabic'],
  weight: ['300', '400', '700', '800'],
});

export const metadata: Metadata = {
  title: "أكادميه بناء التعليميه",
  description: "أكادميه بناء التعليميه",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body dir="rtl" className={almarai.className}>
        <Providers>
          <Suspense fallback={<Loading />}>
            {children}
          </Suspense>
        </Providers>
      </body>
    </html>
  );
}

tailwindcss.config.js #

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    // "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

1. 检查 globals.css 中的 Tailwind 指令 #

确保 src/app/globals.css 包含完整的 Tailwind 核心指令，缺失会导致样式无法生成：

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

2. 拆分异步逻辑与客户端组件 #

客户端组件不能是异步的，需将数据请求逻辑拆分到单独的服务器组件中：

修改 src/app/page.tsx：

'use client'

import Footer from "@/components/footer/Footer";
import Header from "@/components/header/Header";
import CourseList from "./CourseList";

export default function Home() {
    return (
        <>
            <Header />
            <div className="bg-[#F6FCFF] p-4">
                <CourseList />
            </div>
            <Footer />
        </>
    );
}

新建 src/app/CourseList.tsx（服务器组件）：

import { GET_All_Courses } from "@/server/API";
import GCard from "@/components/Card/GCard";
import Link from "next/link";
import { COURSES } from "@/server/models/course";

export default async function CourseList() {
    try {
        const courses = await GET_All_Courses();

        if (!courses || courses.length === 0) {
            return <h1>No courses found</h1>;
        }

        return (
            <div className="flex flex-wrap gap-4">
                {courses.map((course: COURSES) => (
                    <Link key={course.ID} href={`/course/${course.ID}`}>
                        <div className="hover:cursor-pointer">
                            <GCard course={course} />
                        </div>
                    </Link>
                ))}
            </div>
        );
    } catch (error) {
        console.error('Error in CourseList:', error);
        return <div>Error loading courses. Please try again later.</div>;
    }
}

3. 清除缓存并重构项目 #

执行以下命令清理缓存并重新构建，解决缓存损坏导致的样式异常：

rm -rf .next node_modules
npm install
npm run build
npm run dev

4. 简化 Tailwind 内容路径配置 #

移除重复的路径规则，避免匹配异常：

content: [
  "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],

内容的提问来源于stack exchange，提问作者Mahmoud Elattar