wordpress主题使用tailwindcss

tailwindcss可以看做是一个原子化的css框架，可以在主题文件中灵活的应用，下面就针对WordPress如何引用tailwindcss做一个简单的介绍。

前提条件：已经安装了npm

首先创建一个package.json文件，文件内容为{}

执行如下命令安装taiwindcss

text

npm install tailwindcss --save-dev

若出现下面的失败信息，请检查package.json文件是否包含{}.

text

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

text

npx tailwindcss init

修改tailwind.config.js文件，告诉taiwindcss在PHP文件中搜索utility classes

text

module.exports = {
  content: [‘./*.php’,’ ./**/*.php’],
  theme: {
    extend: {},
  },
  plugins: [],
}

新建taiwindcss CSS文件

text

/*!
  Theme Name: Theme-name
  Theme URI: https://chahuawu.com
  Description: Theme-name是一款针对WordPress的CMS主题，主题主要面向于技术网站。
  Author URI: https://chahuawu.com
  details URI: https://chahuawu.com
  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文件

text

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

wordpress主题使用tailwindcss

延伸阅读

评论

发表评论