Next.js中Tailwind CSS服务端响应样式不生效问题求助

使用Tailwind CSS + Next.js开发时，遇到服务端响应样式与浏览器显示不一致的问题：内联style={{backgroundColor: "red"}}样式正常生效，但className="bg-red-500"的样式在服务端响应中完全不生效。

相关配置文件 #

./src/tailwind.config.ts #

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  },
  // eslint-disable-next-line global-require
  plugins: [require("tailwindcss-animate")],
}

./src/styles/globals.css #

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

./src/app/layout.tsx #

import "../styles/globals.css"
import "flag-icons/css/flag-icons.min.css"

type Props = {
  children: React.ReactNode
}

export default function Layout({ children }: Props) {
  return (
    <html lang="en">
      <body suppressHydrationWarning>
        <main>{children}</main>
      </body>
    </html>
  )
}

./src/app/page.tsx #

export default function RootPage() {
  return (
    <div className="flex h-screen flex-1 items-center justify-center bg-red-500">
      <p>Hello from server</p>
    </div>
  )
}

效果对比图 #

可能的原因及修复方案 #

1. Tailwind配置文件语法错误 #

你的tailwind.config.ts中，content数组闭合后多了一个多余的}，这会导致Tailwind无法正确解析配置，进而无法识别页面中的bg-red-500类，自然不会生成对应的样式。

修复：移除多余的}，修正后的配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [require("tailwindcss-animate")],
}

2. Tailwind指令顺序错误 #

Tailwind的三个核心指令有固定顺序要求：@tailwind base; → @tailwind components; → @tailwind utilities;。你当前把@tailwind components放在最后，会打乱样式优先级和注入顺序，影响服务端渲染时的样式生成。

修复：调整globals.css中的指令顺序：

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

3. 样式未被正确生成或加载 #

由于上述配置错误，Tailwind在扫描文件时无法识别page.tsx中的bg-red-500类，导致服务端响应中没有包含该样式代码。重启开发服务器可以让Tailwind重新扫描文件并生成正确的样式。

修复：停止Next.js开发服务器，重新执行npm run dev（或对应启动命令），确保配置生效。

内容的提问来源于stack exchange，提问作者Guinea Pig Taco