Next.js模板字面量样式渲染异常问题求助

问题原因 #

这不是Next.js不稳定，是Tailwind CSS的内容扫描机制导致的。Tailwind的JIT模式会只扫描代码中直接出现的类名，生成对应的样式。你把类名抽成单独的常量，通过模板字面量拼接时，Tailwind的扫描器无法识别这些动态引用的类名，导致刷新或构建后这些样式被自动移除。手动添加再移除能临时恢复，是因为此时扫描器捕捉到了类名，暂时将其纳入样式生成范围。

解决方案 #

1. 给Tailwind添加安全列表（safelist）

修改tailwind.config.js，把需要保留的类名加入safelist，确保Tailwind始终生成这些样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  safelist: [
    'w-[1200px]',
    'xl:w-[1000px]',
    'lg:w-[800px]',
    'md:w-[600px]',
    'sm:w-[400px]',
    'xs:w-full'
  ],
  // 其他Tailwind配置
}

2. 直接在组件内写完整类名

如果这个类组合只在当前组件使用，直接把类名写在className里，让Tailwind能直接扫描到：

<div className="w-[1200px] xl:w-[1000px] lg:w-[800px] md:w-[600px] sm:w-[400px] xs:w-full my-0 mx-auto h-[50px]">
  <Navbar />
</div>

3. 用@apply自定义组件类

在全局CSS文件（比如globals.css）中定义一个自定义类，打包需要的样式，之后在组件中直接引用这个类：

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

@layer components {
  .container-custom {
    @apply w-[1200px] xl:w-[1000px] lg:w-[800px] md:w-[600px] sm:w-[400px] xs:w-full my-0 mx-auto;
  }
}

组件中使用：

<div className="container-custom h-[50px]">
  <Navbar />
</div>

总结 #

你的代码逻辑本身没问题，但这种抽离类名到常量的写法不符合Tailwind的扫描规则，调整成上述任意一种方式就能解决问题，和Next.js的稳定性无关。

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