如何在WordPress页面内容中使用Tailwind CSS类（构建版）

核心原因 #

Tailwind默认仅扫描你指定的本地文件（比如主题模板），区块编辑器中的内容存储在数据库，不在默认扫描范围内，因此这些类不会被打包到output.css中。

解决方案 #

1. 让Tailwind扫描数据库中的文章内容 #

在主题根目录创建tailwind-scanner.php文件，用于输出所有文章的内容供Tailwind扫描：

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
// 获取所有已发布和草稿状态的文章
$posts = get_posts(['numberposts' => -1, 'post_status' => ['publish', 'draft']]);
foreach ($posts as $post) {
    echo $post->post_content;
}

更新tailwind.config.js的content配置，添加这个扫描文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.php", // 扫描所有主题PHP模板
    "./tailwind-scanner.php", // 扫描数据库中的文章内容
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 为区块编辑器入队Tailwind样式 #

在functions.php中添加代码，确保编辑器环境也加载打包好的output.css：

// 前端样式入队
function mytheme_enqueue_front_styles() {
    wp_enqueue_style('theme-tailwind', get_template_directory_uri() . '/output.css', [], wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_front_styles');

// 区块编辑器样式入队
function mytheme_enqueue_editor_styles() {
    wp_enqueue_style('theme-tailwind-editor', get_template_directory_uri() . '/output.css', [], wp_get_theme()->get('Version'));
}
add_action('enqueue_block_editor_assets', 'mytheme_enqueue_editor_styles');

3. 处理动态/不常用类（可选） #

如果用户会使用一些Tailwind未自动扫描到的类，可以在tailwind.config.js中添加safelist预生成这些类：

module.exports = {
  // ...其他配置
  safelist: [
    'text-green-600',
    'bg-gray-100',
    'p-8',
    // 按需添加你需要预生成的类
  ],
}

4. 重新构建Tailwind CSS #

执行构建命令更新output.css：

pnpm build

如果需要实时监听文件变化自动构建，可以使用：

pnpm watch

注意事项 #

• 每次新增/修改文章中的Tailwind类后，都需要重新执行构建命令，让Tailwind捕获新类。
• 确保tailwind-scanner.php的路径正确，能正常加载WordPress环境（wp-load.php的路径可能需要根据你的站点结构调整）。

内容的提问来源于stack exchange，提问作者Randy Listrud