Wordpres中使用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