降级Next.js至14.1.4后Tailwind CSS失效，如何修复？

原本运行正常的Next.js 14.2.3项目，因agora-rtm-sdk兼容性问题降级至14.1.4后，所有CSS样式完全丢失。相关配置文件如下：

tailwind.config.ts #

import type { Config } from "tailwindcss";
import daisyui from "daisyui";

const config: Config = {
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#E84644",
          secondary: "#111111",
          "base-200": "#111111",
          "base-100": "#292929",
          success: "#24B833",
          info: "#1E1E1E"
        },
      },
    ],
  },
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/Components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  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: [daisyui],
};
export default config;

postcss.config.mjs #

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

globals.css #

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

根layout.tsx #

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "../globals.css";
import Navbar from "@/Components/Desktop/Navbar/Navbar";

const poppins = Poppins({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Stranger Hub",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="dark">
      <body className={poppins.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

样式丢失效果：

1. 匹配依赖版本兼容性 #

Next.js 14.1.4与高版本Tailwind、PostCSS可能存在兼容问题，执行命令安装适配版本：

npm install tailwindcss@3.4.1 postcss@8.4.38 autoprefixer@10.4.19 daisyui@4.10.2 --save-dev

2. 完善PostCSS配置 #

Next.js 14.1.x需要明确引入autoprefixer，修改postcss.config.mjs：

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

export default config;

3. 清除缓存并重新构建 #

残留缓存可能导致样式不生效，执行以下命令重置项目依赖与构建缓存：

rm -rf .next node_modules package-lock.json
npm install
npm run build
npm run dev

4. 简化Tailwind内容扫描路径 #

将tailwind.config.ts中的content数组改为更宽泛的路径，确保所有样式文件被扫描：

content: [
  "./src/**/*.{js,ts,jsx,tsx,mdx}",
],

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