如何在现有Webpack+NPM项目中安装Tailwind CSS？

1. 安装依赖 #

在项目根目录执行命令，安装Tailwind及Webpack所需的处理工具：

npm install tailwindcss postcss postcss-loader autoprefixer --save-dev

2. 生成Tailwind配置文件 #

执行命令生成tailwind.config.js（项目根目录）：

npx tailwindcss init

打开该文件，配置content字段指定要扫描的HTML文件（确保Tailwind能识别你在index.html中使用的类）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 配置PostCSS #

在项目根目录新建postcss.config.js文件，内容如下：

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

4. 修改Webpack配置 #

4.1 通用配置（webpack.common.js）

找到module.rules中的CSS处理规则，添加postcss-loader（注意loader顺序为从右到左执行）：

module.exports = {
  // ...其他原有配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
}

4.2 生产环境配置（webpack.prod.js）

如果生产环境使用mini-css-extract-plugin提取CSS文件，需替换style-loader为插件的loader：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他原有配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
  plugins: [
    // ...其他插件
    new MiniCssExtractPlugin()
  ],
}

5. 引入Tailwind指令（不改动原有文件） #

在src目录下新建tailwind.css文件，内容为：

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

6. 更新Webpack入口（不改动原有script.js） #

修改webpack.common.js中的entry字段，将新建的tailwind.css加入入口数组：

module.exports = {
  entry: ['./src/script.js', './src/tailwind.css'],
  // ...其他原有配置
}

7. 启动开发服务 #

执行命令启动开发服务器：

npm run dev

此时你就能在src/index.html中直接使用Tailwind CSS的类名，原有文件未做任何修改。

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