如何用Tailwind CSS和Webpack为多页面应用每个JS入口生成独立生产CSS文件

问题描述 #

项目结构：

Project
├── tailwind.config.js
└── src
    ├── components
    └── pages
        ├── page-a.js
        └── page-b.js

需求：每个页面（page-a.html、page-b.html）仅引入对应页面的JS和专属CSS，不包含其他页面的样式。但当前输出的页面CSS包含了项目所有Tailwind样式，即使是未被当前页面使用的。

相关配置文件 #

webpack.config.js

module.exports = {
  entry: {
    'page-a': 'src/pages/page-a.js',
    'page-b': 'src/pages/page-b.js'
  }
  // ...
}

tailwind.config.js

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
};

page-a.js

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';
// ...

render() {
  return <div className="w-[100px]"></div>
} 

page-b.js

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';
// ...

render() {
  return <div className="w-[150px]"></div>
} 

解决方案 #

前置依赖：先安装所需工具：npm install mini-css-extract-plugin css-loader postcss-loader tailwindcss autoprefixer --save-dev

核心思路是让Tailwind为每个页面单独扫描内容生成专属样式，同时通过Webpack将每个页面的CSS分离为独立文件。

步骤1：为每个页面创建专属Tailwind配置 #

在项目根目录创建两个页面专属的Tailwind配置文件：

tailwind.config.page-a.js

export default {
  content: ['./src/pages/page-a.js', './src/components/**/*.{js,jsx,ts,tsx}'], // 仅扫描page-a相关文件
  theme: { extend: {} },
  plugins: [],
};

tailwind.config.page-b.js

export default {
  content: ['./src/pages/page-b.js', './src/components/**/*.{js,jsx,ts,tsx}'], // 仅扫描page-b相关文件
  theme: { extend: {} },
  plugins: [],
};

步骤2：为每个页面创建专属Tailwind入口CSS #

在src/pages目录下创建两个CSS文件，作为Tailwind的入口：

page-a.tailwind.css

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

page-b.tailwind.css

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

步骤3：修改页面JS的样式引入 #

替换原页面JS中直接导入Tailwind核心CSS的代码，改为引入专属入口CSS：

修改后的page-a.js

// 替换原来的三个Tailwind CSS导入
import './page-a.tailwind.css';
// ...

render() {
  return <div className="w-[100px]"></div>
} 

修改后的page-b.js

// 替换原来的三个Tailwind CSS导入
import './page-b.tailwind.css';
// ...

render() {
  return <div className="w-[150px]"></div>
} 

步骤4：配置Webpack实现样式分离与专属编译 #

修改webpack.config.js，配置postcss-loader根据文件路径匹配对应Tailwind配置，同时用MiniCssExtractPlugin提取独立CSS文件：

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

module.exports = {
  entry: {
    'page-a': './src/pages/page-a.js',
    'page-b': './src/pages/page-b.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      // 保留你原有的JS/JSX处理规则（比如babel-loader）
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // 处理页面专属的Tailwind CSS文件
      {
        test: /\.tailwind\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: (loaderContext) => {
                const filename = loaderContext.resourcePath;
                // 根据文件名匹配对应Tailwind配置
                if (filename.includes('page-a')) {
                  return {
                    plugins: [
                      require('tailwindcss')('./tailwind.config.page-a.js'),
                      require('autoprefixer'),
                    ],
                  };
                } else if (filename.includes('page-b')) {
                  return {
                    plugins: [
                      require('tailwindcss')('./tailwind.config.page-b.js'),
                      require('autoprefixer'),
                    ],
                  };
                }
                return {};
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css', // 生成与页面同名的CSS文件
    }),
  ],
};

步骤5：验证结果 #

运行Webpack构建后，dist目录会生成：

• page-a.js + page-a.css（仅包含page-a使用的Tailwind样式）
• page-b.js + page-b.css（仅包含page-b使用的Tailwind样式）

在对应的HTML文件中分别引入对应页面的JS和CSS即可。

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