Webpack打包Tailwind CSS样式缺失：raw-loader与解决方案
使用Webpack构建项目时，经常遇到Tailwind CSS样式在HTML文件中缺失的问题。本文分析一个案例：使用raw-loader加载HTML文件后，Tailwind CSS样式无法被Webpack正确打包。
问题描述：
项目中使用raw-loader加载包含Tailwind CSS类名的HTML文件（例如header.html），并将其插入主HTML文件（index.html）。Webpack打包后，header.html中的Tailwind CSS样式未生效，被视为普通文本。
立即学习“前端免费学习笔记（深入）”；
index.html代码片段示例：
Webpack配置文件（部分）：
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// ...其他配置...
module: {
rules: [
// ...其他规则...
],
},
// ...其他配置...
};
问题根源在于Webpack默认不处理raw-loader加载的HTML文件中的CSS类名。raw-loader仅读取文件内容为字符串，不进行解析。
解决方案：
修改Tailwind CSS配置文件 (tailwind.config.js) ，让Tailwind扫描并处理raw-loader加载的HTML文件。
修改后的tailwind.config.js：
module.exports = {
purge: ['src/*.html', 'src/base/*.html'], // 关键配置
darkMode: false, // 或 'media' 或 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
purge 选项至关重要。通过添加 src/*.html 和 src/base/*.html (请确保路径正确指向你的header.html文件)，告知Tailwind扫描这些目录下的HTML文件，提取并包含其中的Tailwind CSS类名。Webpack打包后，header.html中的Tailwind CSS样式将被正确包含到最终的CSS文件中。
通过以上调整，即可解决Webpack打包时Tailwind CSS样式在raw-loader加载的HTML文件中缺失的问题。
