如何在Webpack中无PostCSS安装使用TailwindCSS v4？

TailwindCSS v4已彻底移除对PostCSS的依赖，底层由LightningCSS处理，因此可以在Webpack中直接配置，无需安装任何PostCSS相关包。具体步骤如下：

1. 安装依赖 #

首先安装TailwindCSS v4及Webpack相关必要包：

npm install -D tailwindcss@next webpack webpack-cli lightningcss-loader style-loader css-loader

2. 初始化Tailwind配置 #

运行命令生成tailwind.config.js文件，并配置需要扫描的文件路径：

npx tailwindcss init

修改配置文件中的content字段，确保Tailwind能检测到项目中使用类名的文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 配置Webpack #

在webpack.config.js中引入TailwindCSS的Webpack插件，并配置CSS处理规则（使用LightningCSS而非PostCSS）：

const path = require('path');
const TailwindCSSPlugin = require('tailwindcss/webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'lightningcss-loader',
            options: {
              targets: {
                chrome: 100,
                firefox: 99,
                safari: 15,
                edge: 100,
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new TailwindCSSPlugin({
      config: './tailwind.config.js',
    }),
  ],
};

4. 在项目中引入Tailwind指令 #

在主CSS文件（比如src/styles.css）中添加Tailwind的基础指令：

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

然后在入口文件（比如src/index.js）中引入该CSS文件：

import './styles.css';

5. 运行构建 #

执行Webpack构建命令即可：

npx webpack --mode production

完成以上配置后，Webpack将通过TailwindCSS的Webpack插件和LightningCSS处理样式，全程无需依赖PostCSS及其相关插件。

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