Next.js页面刷新后样式失效问题的解决方法

问题核心表现 #

• Next.js搭建的站点，首页通过导入landing page实现，Navbar带多页面跳转链接
• 页面间导航时样式正常，但刷新非首页页面后样式完全失效，返回首页样式恢复正常
• 从普通CSS切换到Tailwind CSS后问题仍未解决

关键排查点与解决方案 #

1. 修正Layout的HTML结构异常

你的Layout代码中，WagmiConfig和ConnectKitProvider被错误嵌套在<html>标签内、<body>标签外，这违反HTML规范，会导致服务端渲染/页面刷新时DOM结构解析异常，进而影响Tailwind样式的正常注入。

修正后的Layout代码：

<html lang="en">
  <head> 
    ...
  </head>
  <body>
    <WagmiConfig config={config}>
      <ConnectKitProvider mode="dark">
        <div className="flex flex-col min-h-screen">
          <Navbar />
          <div className="flex-grow">{children}</div>
          <Footer />
        </div>
      </ConnectKitProvider>
    </WagmiConfig>
  </body>
</html>

2. 确认Tailwind配置覆盖所有页面路径

检查tailwind.config.js的content数组，确保包含项目中所有需要应用样式的文件路径，避免Tailwind遗漏生成对应样式：

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  // 其余配置项...
}

3. 验证全局样式导入正确性

确保在全局样式文件（如app/globals.css或pages/_app.js中导入的CSS文件）中包含Tailwind的核心指令：

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

4. 检查路由与静态生成配置

如果使用next export做静态导出，确认非首页页面已正确配置静态生成逻辑；若为服务端渲染模式，排查路由逻辑是否存在导致样式资源加载异常的情况。

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