Wordpres中使用tailwindcss

张志军 11个月前 (04-06) 423次浏览 0个评论

Wordpress是一款流行的内容管理系统,支持自定义各种主题。Tailwindcss是一款原子化的CSS框架,可在wordpress主题中引入,方便和加快wordpress主题的开发。本文从安装、配置、自定义和生成style.css文件几个方面,介绍wordpress如何引入tailwindcss。

Tailwindcss是一个比较流行的原子化的CSS框架,如果开发者对CSS熟悉的话,基本上不需要自己写太多的代码,即可完成一款CSS主题样式的开发。如果要在wordpress主题中引入tailwindcss,可以按照如下方法操作:
1、安装npm,然后再安装tailwindcss和postcss(安装方法可参考官网的安装指导),若postcss安装后未生成postcss.config.js文件,请手工创建,并复制如下内容:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2、配置tailwindcss:一般情况下,通过npm安装完tailwindcss后,会在主题目录下生成tailwind.config.js的文件,如果没有生成的话,可手工创建此文件,然后复制如下内容到tailwind.config.js中;

/*
 * @Filename     : tailwind.config.js
 * @Description  : 
 * @Author       : Zhang Zhijun
 * @Copyright    : Copyright (c) 2022 by chahuawu.com, All Rights Reserved.
 * @License      : Mulan PubL v2
 * @Link         : https://chahuawu.com
 * @CreateTime   : 2022-12-17 21:42:52
 * @LastModifyTime: 2023-01-27 08:30:01
 */
/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

module.exports = {
  prefix: 'bgn-', /* CSS 前缀*/
  darkMode: 'class', // or 'media'  // darkmode use media
  content: ['./*.php','./**/*.php'],
  // 主题:定义与视觉相关的东西
  theme: {
     extend: {
    },
  },
  // 为每个核心功能插件生成变体
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
  plugins: [],
}

3、新建tailwind.css文件:wordpress主题的识别依赖style.css文件,因此需要tailwindcss在每次编译生成style.css文件时,将这些自定义的内容在编译时复制到style.css文件。可参考如下内容调整tailwindcss文件;
文件生成命令:tailwind.config.js: npx tailwindcss init
修改tailwindcss文件:

/*!
	Theme Name: Beginner
	Theme URI: https://chahuawu.com
	Description: Beginner 是一款针对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;
/* add basic style */
@layer base {
}
@tailwind utilities;

4、自定义CSS:tailwindcss尽管已经提供了大量的原子属性,但是如果有一些class依赖父类的场景,或者一些特殊的属性tailwindcss不支持的情况下,就需要在tailwind.css文件中增加自定义的CSS类,具体使用方法如下:
在@layer base{}中增加具体的样式,如:

@layer base{
 footer a:hover,
  .bgn-footer-menu-items li.bgn-current-menu-item,
  .bgn-footer-menu-items a:hover {
    @apply bgn-text-gray-300;
}

5、生成style.css文件
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
本文仅介绍如何在wordpress中引入tailwindcss,变体等其他tailwindcss的使用方法,请参考tailwindcss的官方文档。

tailwind.config.js,tailwind.css样例文件可参考:https://gitee.com/gallanthunter/beginner

0 0 投票数
文章评分

版权申明:

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

原文链接:https://ilearning.org.cn/program/web/wordpres%e4%b8%ad%e4%bd%bf%e7%94%a8tailwindcss.html

客官,说点什么吧!

订阅评论
提醒
guest

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