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中；

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文件：

@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