这几天在云落的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.