Webpack打包时，raw-loader加载的HTML文件中的Tailwind CSS类名为何无法被正确处理？

Webpack与Tailwind CSS结合使用时，raw-loader加载的HTML文件（例如包含Tailwind CSS类名的header.html）中的样式无法被正确处理，这是个常见问题。根本原因在于raw-loader直接将HTML文件作为字符串加载，绕过了Webpack的CSS处理器，导致Tailwind CSS类名无法被识别和处理。

问题示例：

假设你的index.html使用raw-loader引入header.html：

<div class="w-full h-6 bg_color text-white leading-1">
  <a href="">公告公告</a>
</div>

header.html也包含Tailwind CSS类名。Webpack打包后，header.html中的Tailwind CSS类名不会被处理，而是作为普通文本输出。

立即学习“前端免费学习笔记（深入）”；

即使你的Webpack配置正确包含了mini-css-extract-plugin、css-loader、sass-loader和postcss-loader等，这些loader和插件只处理Webpack直接处理的CSS文件，而不会处理raw-loader加载的HTML文件中的类名。

解决方案：

关键在于告诉Tailwind CSS需要处理哪些文件。在tailwind.config.js中，purge选项（或更新版本中的content选项）指定需要处理的文件路径。通过配置content，Tailwind CSS会扫描指定文件，找到并处理其中的Tailwind CSS类名。

修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/*.html',
    './src/base/*.html',
    // 添加所有需要处理Tailwind CSS类名的HTML文件路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将所有包含Tailwind CSS类名的HTML文件路径添加到content数组中。 注意根据你的项目实际路径调整这些路径。 这确保Tailwind CSS扫描到这些HTML文件，正确处理其中的类名，最终生成包含正确样式的CSS文件。 之后，Webpack就能正确打包这些样式了。 如果使用的是Tailwind CSS的新版本，请将purge替换为content。

以上就是Webpack打包时，raw-loader加载的HTML文件中的Tailwind CSS类名为何无法被正确处理？的详细内容，更多请关注php中文网其它相关文章！