Next.js + Tailwind CSS全局样式在暗黑模式下失效问题求助

1. 用@layer包裹全局样式 #

Tailwind JIT模式下，自定义全局样式必须放在对应@layer块中，否则会被Tailwind内置样式覆盖，或JIT引擎无法识别暗黑模式变体。修改globals.css如下：

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

@layer components {
  .btn-Projects {
    @apply inline-flex text-white dark:text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg
  }

  .project-card {
    @apply flex flex-col m-3 rounded-xl w-full
            transition duration-300 transform border border-gray-300
            hover:scale-105
            hover:shadow-lg
            dark:border-gray-200/50
            dark:hover:shadow-gray-400/40
            hover:text-blue-600
  }
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply text-slate-900 dark:text-white
  }

  footer {
    @apply text-gray-600 dark:text-white bg-gray-100 dark:bg-slate-600/20
  }
}

2. 确认next-themes的ThemeProvider配置正确 #

在_app.jsx/_app.tsx中必须包裹ThemeProvider并指定attribute="class"，确保暗黑模式切换时能给<html>标签添加dark类：

import { ThemeProvider } from 'next-themes';
import '../styles/globals.css'; // 确保这是顶层导入

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

3. 完善tailwind.config.js的content配置 #

确保数组包含所有使用目标样式的文件，补充src目录下的jsx/tsx类型文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    './pages/**/*.{js,ts,jsx,tsx,html}',
    './components/**/*.{js,ts,jsx,tsx,html}',
    './src/**/*.{js,ts,jsx,tsx,html}'
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

4. 清除缓存并重启开发服务器 #

缓存可能导致样式不更新，执行以下操作：

• 停止Next.js开发服务器
• 删除.next文件夹
• 重新启动服务器：npm run dev

补充说明 #

.project-card之前生效是因为该类在组件中被直接引用，JIT引擎扫描后保留了相关样式；而其他样式因未放在@layer中，或未被JIT识别到引用，被优化剔除。

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