wordpress主题使用tailwindcss

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

tailwindcss可以看做是一个原子化的css框架,可以在主题文件中灵活的应用,下面就针对WordPress如何引用tailwindcss做一个简单的介绍。前提条件:已经安装了npm首先创建一个package.json文件,文件内容为{}执行如下命令安装taiwindcssnpm ins......

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

0 0 投票数
文章评分

版权申明:

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

原文链接:https://ilearning.org.cn/program/web/wordpress-zhuti-shiyong-tailwindcss.html

客官,说点什么吧!

订阅评论
提醒
guest

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