如何在使用Divi主题的WordPress站点用Tailwind CSS定制指定页面/元素样式

完全可以在不更换Divi主题、不安装多主题共存插件的前提下，仅针对指定页面单独加载Tailwind CSS完成自定义样式修改，以下是可直接落地的实现方案：

方案1：CDN快速接入（适合小范围局部修改） #

无需本地编译，直接在指定页面注入Tailwind资源即可使用：

• 首先获取你需要修改的页面ID，可在WordPress后台页面列表的编辑页URL中查看post=xxx参数，xxx即为页面ID
• 将以下代码添加到当前使用的Divi子主题的functions.php文件中，替换代码中的示例页面ID：

add_action('wp_head', 'load_tailwind_for_specific_page');
function load_tailwind_for_specific_page() {
  // 括号内可传入单个页面ID、页面别名、页面标题，也支持传入数组匹配多个页面
  if (is_page( 123 )) {
    // 加载Tailwind CDN
    echo '<script src="https://cdn.tailwindcss.com"></script>';
    // Tailwind配置，关闭默认样式重置是避免和Divi样式冲突的核心设置
    echo '<script>
      tailwind.config = {
        corePlugins: {
          preflight: false,
        },
        // 可根据站点原有风格扩展自定义配置，统一色值、字体等
        theme: {
          extend: {
            colors: {
              brand: "#替换为站点主色值",
            },
          },
        }
      }
    </script>';
  }
}

• 进入对应页面的Divi编辑器，添加「自定义HTML」模块，直接在模块内编写带Tailwind类名的原生HTML代码即可正常生效，无需额外配置。

方案2：本地编译接入（适合大范围自定义、需要JSX的场景） #

如果需要用JSX开发、或者要减少冗余代码提升加载性能，可以用本地编译的方式：

• 本地使用Tailwind CLI初始化项目，开启JIT模式，在配置中指定你编写的HTML/JSX文件作为扫描源，编译后只会保留你实际用到的Tailwind类，体积通常在10KB以内
• 将编译得到的独立CSS文件上传到Divi子主题的静态资源目录下
• 还是使用上述wp_head条件钩子，仅在指定页面引入编译好的CSS文件即可，同样需要在Tailwind配置中关闭preflight避免样式冲突
• 如果需要使用JSX，可以额外在单页注入对应编译后的JS脚本，不会和Divi原有功能产生冲突。

常见问题处理 #

• 遇到少量样式优先级冲突时，直接在Tailwind类名前加!前缀即可实现!important优先级覆盖，例如!text-brand !p-4
• 自定义区域的交互逻辑可以单独写原生JS或者引入前端框架，不会影响站点其他页面的正常运行。

内容的提问来源于stack exchange，提问作者Sagar Siwach