React + Webpack项目中Tailwind CSS无法正常工作的原因是什么？

1. CSS文件未被Webpack处理 #

你的index.css位于static/css/目录，但Webpack的CSS规则里include仅指定了src目录，导致该文件无法被PostCSS处理。修改Webpack配置：

// webpack.config.js
{
  test: /\.css$/i,
  // 将static/css目录加入处理范围
  include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'static/css')],
  use: ['style-loader', 'css-loader', 'postcss-loader'],
}

2. 未在入口文件引入Tailwind CSS #

在项目入口文件src/index.js顶部添加CSS引入：

import '../static/css/index.css';

3. Tailwind未扫描到模板HTML文件 #

页面模板templates/frontend/index.html未被加入tailwind.config.js的content扫描范围，导致模板内的Tailwind类无法生成对应样式。修改配置：

// tailwind.config.js
content: [
  "./src/**/*.{html,js}",
  "./templates/**/*.html", // 添加该路径
  "./static/frontend/*.{html,js}"
],

4. Webpack devServer配置重复 #

配置中重复定义了devServer，合并为一个避免冲突：

// webpack.config.js
devServer: {
  static: {
    directory: path.resolve(__dirname, 'dist'),
  },
  port: 3000,
  open: true,
  hot: true,
  compress: true,
  historyApiFallback: true,
},

完成以上修改后，重启Webpack开发服务器，Tailwind样式即可正常生效。

内容的提问来源于stack exchange，提问作者0x Empyrean