在Next.js的.module.css中使用Tailwind CSS v4 @apply指令的方法

所需依赖安装 #

首先安装Tailwind v4配套的PostCSS插件，执行命令：

npm install tailwindcss @tailwindcss/postcss-plugin --save-dev

配置步骤 #

1. 修改PostCSS配置
   在项目根目录创建或更新postcss.config.js，添加Tailwind的PostCSS插件：

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

2. 更新Tailwind配置文件
   修改tailwind.config.ts（或tailwind.config.js），让Tailwind扫描你的CSS Modules文件，确保content数组包含组件和应用目录下的所有.module.css文件：

import type { Config } from 'tailwindcss';

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.module.css',
    './components/**/*.module.css',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

3. 全局CSS文件配置
   确保全局CSS文件（比如app/globals.css）包含Tailwind基础指令，不要在CSS Modules中添加这些：

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

4. 在CSS Modules中使用@apply
   现在可以在MyComponent.module.css里正常复用Tailwind工具类：

.customText {
  @apply text-green-500;
}

额外排查步骤 #

如果问题仍未解决：

• 确认Next.js版本为14.x及以上，保证与Tailwind v4兼容
• 删除node_modules和package-lock.json后重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

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