Next.js 14生产构建时Tailwind类名损坏问题求助

问题背景 #

使用技术栈：

• Next.JS 14.1.0
• Tailwind 3.3.2
• MantineUI 7.6.1

开发环境组件样式正常，但生产部署后部分样式丢失，排查发现Tailwind类名出现损坏情况。此前通过行内CSS替代Tailwind类名可解决问题，但修改成本过高。

核心问题排查 #

从你提供的配置来看，样式导入顺序错误和Tailwind类名识别逻辑是导致生产环境类名损坏的主要原因。

修复步骤 #

1. 调整全局样式文件（globals.css）结构 #

原配置中@tailwind base被包裹在自定义@layer tailwind中，且Mantine样式导入位置错误，导致Tailwind与Mantine的样式层叠冲突，生产构建时类名被错误优化。修改后的globals.css如下：

// app/globals.css
@import '@mantine/core/styles.css';
@import '@mantine/carousel/styles.css';
@import '@mantine/notifications/styles.css';
@import '@mantine/dates/styles.css';

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

2. 检查动态生成的Tailwind类名 #

如果项目中存在动态拼接类名的场景（如className={p-${size}}），Tailwind的JIT引擎无法识别这些类名，生产构建时会被剔除，表现为类名"损坏"。

• 错误写法：

  <div className={`mt-${isLarge ? '8' : '4'}`}></div>
  

• 正确写法：

  <div className={isLarge ? 'mt-8' : 'mt-4'}></div>
  

若无法避免动态拼接，需将所有可能用到的类名加入safelist：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,mdx}'
  ],
  safelist: [
    'border', 
    'shadow',
    // 添加动态使用的类名，示例：
    'mt-4',
    'mt-8',
    'p-2'
  ],
  // ...其他配置
};

3. 清理缓存并重新构建生产环境 #

缓存残留可能导致样式构建异常，执行以下命令清理后重新构建：

rm -rf .next node_modules
npm install
npm run build

4. 确认全局样式与MantineProvider的正确导入 #

确保在Next.js的根布局文件中正确导入全局样式并包裹MantineProvider：

// src/app/layout.tsx
import './globals.css';
import { MantineProvider } from '@mantine/core';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <MantineProvider>{children}</MantineProvider>
      </body>
    </html>
  );
}

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