WP Tailwind Customizer

WP Tailwind Customizer

将 WordPress 后台样式转换为 Tailwind CSS 变量，支持自定义配色方案和按区域（后台、登录、注册、前端）独立控制。

功能特性

  • 将 WordPress 内置 CSS 颜色值转换为 Tailwind CSS 变量（--color-*）
  • 支持 8 种后台配色方案自动替换
  • 按区域独立控制：后台、includes、登录、注册、前端
  • 从 WordPress 安装目录直接读取源文件，无需手动拷贝
  • 颜色映射通过外部 API 自动查询，支持本地缓存

项目结构

wp-tailwind-customizer/
├── index.php                        # 插件主入口
├── package.json                     # Node.js 依赖
├── postcss.config.js                # PostCSS 配置
├── config/settings.php              # 集中配置（路径、样式注册）
├── admin/
│   ├── class-admin.php              # 设置页面管理
│   └── views/settings-page.php      # 设置页面视图
├── includes/
│   ├── class-plugin.php             # 插件主类（单例）
│   ├── class-loader.php             # 钩子加载器
│   ├── class-assets.php             # 资源入队管理
│   └── class-color-scheme.php       # 配色方案 URL 替换
├── assets/wp-styles/
│   ├── entry/                       # 入口 CSS（5 个，含 @import "tailwindcss/theme"）
│   ├── processed/
│   │   ├── color-only/              # 颜色属性过滤后（pipeline 产物）
│   │   └── tailwind-vars/           # Tailwind 变量转换后（pipeline 产物）
│   └── color-map.json               # 颜色映射缓存
├── build/
│   ├── build.js                     # PostCSS 构建入口
│   ├── run-pipeline.sh              # 完整构建流水线脚本
│   ├── scripts/build-themes.js      # 配色方案编译脚本
│   └── utils/build-utils.js         # 构建工具函数
├── tools/
│   ├── css_color_filter.py          # 从 CSS 提取颜色属性
│   ├── tailwind_color_converter.py  # 颜色值 → Tailwind 变量 + API 查询
│   └── css_empty_rule_remover.py    # 移除空 CSS 规则
├── dist/                            # 构建输出
│   ├── admin.min.css
│   ├── login.min.css
│   ├── signup.min.css
│   ├── frontend.min.css
│   ├── includes.min.css
│   └── themes/                      # 8 种配色方案
│       ├── blue.min.css
│       ├── coffee.min.css
│       ├── ectoplasm.min.css
│       ├── light.min.css
│       ├── midnight.min.css
│       ├── modern.min.css
│       ├── ocean.min.css
│       └── sunrise.min.css
└── README.md

安装

1. 安装依赖

npm install
pip install requests

2. 构建

# 完整流水线（颜色提取 → 转换 → PostCSS 编译 → 配色方案编译）
npm run pipeline

# 或分步执行
npm run build:postcss   # 编译入口 CSS
npm run build:themes    # 编译配色方案 CSS

3. 激活插件

在 WordPress 后台 插件 页面激活 WP Tailwind Customizer。

使用

设置页面

激活后进入 设置 > Tailwind Customizer，可独立控制各区域的样式加载：

选项 说明 默认
Admin Styles 后台管理区域 开启
Includes Styles 公共样式（admin bar、编辑器等） 开启
Login Styles 登录页面 开启
Signup Styles 注册页面 开启
Frontend Styles 前端页面 关闭
Custom Color Schemes 使用 Tailwind 版配色方案 开启

配色方案

插件自动替换 WordPress 内置的 8 种后台配色方案：

  • Modern（默认）
  • Blue / Coffee / Ectoplasm
  • Light / Midnight / Ocean / Sunrise

用户在个人资料页切换配色方案后，插件自动加载对应的 Tailwind 版本。

构建流水线

WordPress 安装目录（wp-admin/css/, wp-includes/css/）
    ↓
css_color_filter.py  提取颜色属性
    ↓
assets/wp-styles/processed/color-only/
    ↓
tailwind_color_converter.py  转换为 Tailwind CSS 变量（外部 API + 本地缓存）
    ↓
assets/wp-styles/processed/tailwind-vars/
    ↓
PostCSS（@tailwindcss/postcss + cssnano）
    ↓
dist/*.min.css, dist/themes/*.min.css

流水线命令

# 自动检测 WordPress 路径
npm run pipeline

# 指定 WordPress 路径
bash build/run-pipeline.sh /var/www/wordpress

颜色转换

颜色转换使用外部 API 将 WordPress 色值映射到 Tailwind CSS 类。映射结果缓存于 color-map.json。如需清空缓存重新生成：

rm assets/wp-styles/color-map.json
bash build/run-pipeline.sh

技术栈

技术 版本 用途
Tailwind CSS ^4.2.0 CSS 工具类框架
@tailwindcss/postcss ^4.2.0 Tailwind PostCSS 插件
PostCSS ^8.5.6 CSS 编译
cssnano ^6.0.3 CSS 压缩
Python 3 3.x 颜色处理脚本
PHP 7.4+ WordPress 插件

命令参考

命令 说明
npm run pipeline 完整构建流水线
npm run build:postcss PostCSS 编译入口 CSS
npm run build:themes 编译配色方案 CSS
npm run build:colors PostCSS 编译 + 配色方案编译
npm run watch 监听模式自动重建
bash build/run-pipeline.sh [wp-path] 完整流水线（可指定 WP 路径）
python3 tools/tailwind_color_converter.py 重新生成颜色映射
python3 tools/css_color_filter.py -d <dirs> -o <out> 提取颜色属性

许可证

GPL-2.0-or-later