如何在基于webpack的自定义React App中配置Tailwind CSS？

1. 安装必需依赖 #

执行以下命令安装Tailwind及配套的postcss相关依赖：

npm install -D tailwindcss postcss autoprefixer postcss-loader

如果用pnpm或者yarn，替换对应的包管理命令即可。

2. 生成配置文件 #

执行初始化命令自动生成Tailwind和PostCSS的配置文件：

npx tailwindcss init -p

执行完成后项目根目录会生成tailwind.config.js和postcss.config.js两个文件。

3. 配置Tailwind扫描路径 #

打开tailwind.config.js，在content字段中填入所有会用到Tailwind类名的文件路径，确保Tailwind可以正确摇树删除未使用的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 按你的项目实际路径调整，这里是src下所有js/jsx/ts/tsx文件
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 调整webpack配置 #

打开你的webpack配置文件，在处理css的规则中添加postcss-loader，注意loader的执行顺序是从右到左，postcss-loader需要放在css-loader之后：

module.exports = {
  // 原有其他webpack配置，比如entry、output、babel相关规则等
  module: {
    rules: [
      // 其他现有规则
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ]
  }
}

注意：如果你的项目配置了css Modules、mini-css-extract-plugin等，只需要在css处理loader的最后加上postcss-loader即可，不需要调整原有逻辑。

5. 注入Tailwind全局样式 #

在你的项目全局css文件（比如src/index.css）顶部添加Tailwind的基础指令：

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

然后在项目入口文件（比如src/index.jsx）中引入这个全局css文件：

import './index.css'
// 其他入口逻辑

6. 验证配置 #

随便找一个React组件，添加Tailwind类名测试效果：

function App() {
  return <div className="text-blue-600 text-3xl font-bold">Tailwind 配置成功</div>
}

启动项目后如果文字样式生效，即配置完成。生产构建时Tailwind会自动剔除所有未使用的样式，无需额外配置。

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