登录
首页 >  文章 >  前端

如何使用Webpack打包非入口文件中的 Tailwind CSS 样式?

时间:2024-11-13 09:07:05 335浏览 收藏

有志者,事竟成!如果你在学习文章,那么本文《如何使用Webpack打包非入口文件中的 Tailwind CSS 样式?》,就很适合你!文章讲解的知识点主要包括,若是你对本文感兴趣,或者是想搞懂其中某个知识点,就请你继续往下看吧~

如何使用Webpack打包非入口文件中的 Tailwind CSS 样式?

配置webpack tailwindcss以打包非入口文件中的样式

为了将non-entry文件中的tailwindcss样式被打包到新的css文件,需要对webpack tailwindcss的配置进行修改。

在tailwind.config.js文件中,新增purge配置项,并添加需要被解析的文件路径。如下所示:

module.exports = {
  purge: ['src/*.html','src/base/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
      extend: {},
  },
  variants: {
      extend: {},
  },
  plugins: [],
};

这样一来,索引的html文件及其中引用的header.html文件中的tailwindcss类名就可以被正确打包到css文件中。

以上就是《如何使用Webpack打包非入口文件中的 Tailwind CSS 样式?》的详细内容,更多关于的资料请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>