Next.js 15.3.2环境下TailwindCSS V4无法识别CSS模块文件中Tailwind指令的问题

我完全理解你现在的困扰——Tailwind CSS v4升级后，原本和CSS Modules配合使用的@apply指令出现了部分失效的情况，特别是像bg-slate-700这类颜色工具类无法被正确生成样式，而w-full、h-full却能正常生效。结合你提供的代码和描述，我来帮你分析问题根源并给出可行的解决办法：

问题核心原因 #

Tailwind CSS v4的扫描规则做了重大调整：默认不会扫描任何CSS文件（包括.module.css），所以它无法检测到你在CSS Modules中通过@apply引用的Tailwind工具类（比如bg-slate-700），自然不会生成对应的CSS样式。

至于w-full、h-full能生效，大概率是这类基础尺寸类属于Tailwind的核心工具类，可能在全局上下文或其他被扫描的文件中间接触发了生成；但颜色类没有被任何被扫描的文件引用，所以完全不会被生成。

另外你在globals.css中使用的@source "../";并不是Tailwind v4的正确配置方式，这个指令在v4中已经被移除，扫描路径需要通过配置文件来指定。

正确的解决步骤 #

1. 配置Tailwind扫描CSS Modules文件 #

在项目根目录创建或修改tailwind.config.ts（如果是JS项目则用tailwind.config.js），显式将.module.css文件加入到扫描列表中：

import type { Config } from 'tailwindcss';

export default {
  content: [
    // 扫描所有React/TSX文件（默认推荐）
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    // 显式扫描所有CSS Modules文件
    './src/**/*.module.css',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

2. 修正globals.css中的错误指令 #

移除globals.css里无效的@source "../";行，修正后的文件如下：

@import "tailwindcss";

body, html {
  @apply w-dvw h-dvh;
  @apply p-0 m-0;
}

3. 确保PostCSS配置正确（可选但建议） #

如果你的项目还没有postcss.config.js，在根目录创建一个，确保Tailwind的PostCSS插件正确启用：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

4. 重启开发服务器 #

Tailwind的配置修改后需要重启Next.js开发服务器，新的扫描规则才能生效。

额外验证与注意事项 #

• 检查你的.gitignore文件，确保没有包含src目录或.module.css相关路径，否则Tailwind会跳过这些文件的扫描。
• 确认依赖版本一致性：tailwindcss和@tailwindcss/postcss的版本必须保持一致（都是^4.1.6），避免版本冲突导致的异常。
• 可以做一个快速测试：在page.tsx中直接写<div className="bg-slate-700"></div>，如果这个元素能正常显示背景色，说明Tailwind的基础扫描正常，问题确实出在CSS Modules文件未被扫描的配置上。

内容来源于stack exchange