使用 Webpack 打包后，尾部 windcss 类名没有被打包，如何解决？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《使用 Webpack 打包后，尾部 windcss 类名没有被打包，如何解决？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用 webpack 打包后，尾部 windcss 的类名没有被打包的问题，可以通过在 tailwind.config.js 中配置 purge 选项来解决。

purge 选项可以指定要分析的 html 文件，以便 tailwindcss 可以提取所有使用的类名并将其包含在最终 css 文件中。在这种情况下，可以将 index.html 和 header.html 文件添加到 purge 数组中。

修改后的 tailwind.config.js 文件可能如下所示：

module.exports = {
  purge: ['index.html', 'src/base/*.html'], // 新增 index.html 和 src/base/*.html
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

通过添加这些文件，tailwindcss 现在将分析它们，并将任何使用的类名包含在打包的 css 文件中。

到这里，我们也就讲完了《使用 Webpack 打包后，尾部 windcss 类名没有被打包，如何解决？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！