使用Webpack配置Tailwind CSS遇模块解析失败，需适配Loader

错误原因 #

Webpack无法解析style.css中的@tailwind指令，核心是缺少处理CSS及PostCSS的loader配置。

解决步骤 #

1. 安装依赖包 #

在项目根目录执行命令：

npm install --save-dev css-loader style-loader postcss-loader tailwindcss postcss

• css-loader：解析CSS中的@import和url()语法
• style-loader：将CSS注入到DOM（开发环境使用）
• postcss-loader：对接PostCSS插件处理Tailwind指令
• tailwindcss：Tailwind CSS核心库
• postcss：PostCSS核心工具

2. 创建PostCSS配置文件 #

在项目根目录新建postcss.config.js，写入以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 修改Webpack配置 #

打开webpack.common.js，在module.rules中添加.css文件的处理规则：

module.exports = {
  // 保留原有配置...
  module: {
    rules: [
      // 保留已有的babel-loader规则...
      {
        test: /\.css$/i,
        use: [
          // 生产环境用MiniCssExtractPlugin提取CSS，开发环境用style-loader注入DOM
          process.env.NODE_ENV === 'production' 
            ? require('mini-css-extract-plugin').loader 
            : 'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

注：你的webpack.prod.js中已配置MiniCssExtractPlugin，无需额外新增插件配置，保持原有生产环境配置即可。

4. 初始化Tailwind配置 #

如果项目根目录没有tailwind.config.js，执行命令生成：

npx tailwindcss init

并在配置中指定需要扫描的文件路径（确保Tailwind能识别项目中的组件）：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

验证 #

重启开发服务或执行构建命令，@tailwind指令即可被正常解析，错误消失。

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