webpack打包時Tailwind css樣式丟失：raw-loader與purge選項的沖突
使用Webpack打包項目時，常常遇到Tailwind CSS樣式缺失的問題。本文將重點分析使用raw-loader加載html文件導致Tailwind CSS樣式丟失的場景，并提供解決方案。
問題描述：
當使用raw-loader加載包含Tailwind CSS類名的HTML文件（例如header.html，包含
）時，Webpack打包后，這些類名可能無法正確解析和編譯到最終的CSS文件中，導致樣式缺失。即使已配置mini-css-extract-plugin和postcss-loader，問題依然存在。這是因為raw-loader將HTML內容作為字符串處理，繞過了Webpack的CSS加載器。
立即學習“前端免費學習筆記（深入）”；
解決方案：
問題的核心在于Tailwind CSS的purge功能。purge用于移除未使用的CSS類，默認只處理入口文件和組件。為了讓Tailwind CSS正確處理raw-loader加載的HTML文件中的類名，需要在tailwind.config.JS中配置purge選項，明確指定需要處理的HTML文件路徑。
修改tailwind.config.js：
在tailwind.config.js文件中，修改purge選項，添加需要處理的HTML文件路徑：
module.exports = { purge: ['src/*.html', 'src/base/*.html'], // 添加 src/base/*.html 以包含 header.html darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], };
通過以上修改，purge選項將掃描src目錄下所有.html文件以及src/base目錄下所有.html文件（包含header.html），確保Tailwind CSS能夠正確解析和處理其中的類名，并將正確的樣式包含在生成的CSS文件中。 這樣，Webpack就能正確打包header.html中的Tailwind CSS樣式了。
