Webpack5搭建React+TS项目时Tailwind的@tailwind指令失效报错

postcss.config.js: Emit skipped错误本质是Webpack 5将postcss配置文件识别为需要编译的资源文件，触发了编译输出跳过规则，和postcss-loader版本没有直接关联。可按以下步骤逐一核对修正：

步骤1：确认文件目录结构 #

• 项目根目录下直接存放postcss.config.js、tailwind.config.js，不要放到src目录内
• 全局Tailwind入口css（如global.tailwind.css）放在src目录下

步骤2：修正Webpack样式处理规则 #

loader执行顺序为从右到左，必须保证postcss-loader放在css-loader之后，同时增加排除规则避免误编译配置文件：

// webpack.config.js 中module.rules配置
module: {
  rules: [
    {
      test: /\.css$/i,
      exclude: /node_modules|.*\.config\.js$/,
      use: [
        "style-loader",
        "css-loader",
        "postcss-loader"
      ]
    },
    // 若使用scss可新增以下规则
    {
      test: /\.s[ac]ss$/i,
      exclude: /node_modules/,
      use: [
        "style-loader",
        "css-loader",
        "postcss-loader",
        "sass-loader"
      ]
    }
  ]
}

步骤3：核对postcss配置文件内容 #

// 根目录下postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

步骤4：核对tailwind配置文件内容 #

必须配置content字段，否则Tailwind会生成空样式：

// 根目录下tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,html}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤5：确认全局CSS与入口引入配置 #

/* src/global.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在项目入口文件（如src/index.tsx）顶部引入该CSS文件：
import './global.tailwind.css'

异常兜底排查 #

• 删除node_modules和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖
• 确认所有必备依赖已安装：tailwindcss postcss autoprefixer postcss-loader css-loader style-loader均为devDependencies即可

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