tailwindcss可以看做是一个原子化的css框架,可以在主题文件中灵活的应用,下面就针对WordPress如何引用tailwindcss做一个简单的介绍。
前提条件:已经安装了npm
首先创建一个package.json文件,文件内容为{}
执行如下命令安装taiwindcss
npm install tailwindcss --save-dev
若出现下面的失败信息,请检查package.json文件是否包含{}.
npm ERR! code EJSONPARSE npm ERR! path E:\lifetime/package.json npm ERR! JSON.parse Unexpected end of JSON input while parsing empty string npm ERR! JSON.parse Failed to parse JSON data. npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.
执行如下命令,创建taiwindcss配置文件tailwind.config.js
npx tailwindcss init
修改tailwind.config.js文件,告诉taiwindcss在PHP文件中搜索utility classes
module.exports = { content: [‘./*.php’,’ ./**/*.php’], theme: { extend: {}, }, plugins: [], }
新建taiwindcss CSS文件
/*! Theme Name: Theme-name Theme URI: https://ilearning.org.cn Description: Theme-name是一款针对WordPress的CMS主题,主题主要面向于技术网站。 Author URI: https://ilearning.org.cn details URI: https://ilearning.org.cn Version: 0.1.0 License: Mulan PSL v2 License URI: http://license.coscl.org.cn/MulanPSL2 Tags: 响应式,CMS主题 */ @tailwind base; @tailwind components; @tailwind utilities;
执行如下命令,生成style.css文件
npx tailwindcss -i ./tailwind.css -o ./style.css --watch
参考文件:
https://css-tricks.com/adding-tailwind-css-to-wordpress-themes/
https://www.h5w3.com/z/347546.html