tailwindcss无法扫描文件生成css的解决方法

张志军 1年前 (2022-12-21) 567次浏览 0个评论

这几天在云落的git主题制作一个自己的博客主题,由于git的css代码都是压缩过的,因此考虑自己写CSS实现一次,也可以在熟悉一下WordPress主题的开发。以前开发的lifetime主题和chahuawu主题,都是bootstrap 加自己写的css实现,这次考虑完全采用tailwindcss......

这几天在云落的git主题制作一个自己的博客主题,由于git的css代码都是压缩过的,因此考虑自己写CSS实现一次,也可以在熟悉一下WordPress主题的开发。

以前开发的lifetime主题和chahuawu主题,都是bootstrap 加自己写的css实现,这次考虑完全采用tailwindcss实现,同时也可以学习一下tailwindcss。

一切按照入门指引,完成tailwindcss的安装和配置,但是执行命令生成的style.css文件始终没有生成引用的css类,经过不断的百度,最终在官方的文档中找到了解决方法。tailwindcss在3.0版本的时候做了调整,将purge命名为content,如果在配置文件中两个属性都存在,则会导致生成空的css文件。具体如下:

module.exports = {
  purge: [],   // 删除,否则会导致css文件为空
  content: [
    // Example content paths...
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    // ...
  }
  // ...
}

官方的描述如下:
https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

Since Tailwind no longer uses PurgeCSS under the hood, we’ve renamed the purge option to content to better reflect what it’s for:
If you weren’t already using the purge option in your project, it’s crucial that you configure your template paths now or your compiled CSS will be empty.

Since we’re not using PurgeCSS under the hood anymore, some of the advanced purge options have changed. See the new content configuration documentation for more information on advanced options.

0 0 投票数
文章评分

版权申明:

本博客所有文章除特别声明外均采用BY-NC-SA 4.0许可协议。依据BY-NC-SA 4.0许可协议,转载请附上原文出处链接及本声明。

原文链接:https://ilearning.org.cn/program/web/tailwindcss-wufa-saomiao-wenjian-shengcheng-css-de-jiejuefangfa.html

客官,说点什么吧!

订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论
关于本站
立学网是一个分享个人学习总结的知识网站,内容覆盖编程技术讨论,金融经济,历史哲学,读书笔记,生活随笔等内容。
关注我们
关注微信公众号 关注微博