将Tailwind CSS集成到WordPress主题中，能让开发者借助工具类快速构建页面样式，减少重复CSS代码的编写，提升主题开发效率。整个过程需要结合Node环境和WordPress主题的文件结构来完成配置。
环境准备
首先需要确保本地开发环境已经安装了Node.js和npm，因为Tailwind CSS需要通过npm来管理依赖和构建样式。如果还没有安装，可以先到Node.js官网下载对应系统的安装包完成安装，安装完成后可以在终端输入node -v和npm -v验证是否安装成功。
同时需要准备好一个WordPress主题目录，本文以主题目录名为tailwind-wp-theme为例，主题目录中需要包含基础的WordPress主题文件，比如style.css、index.php、functions.php等。
安装Tailwind CSS依赖
打开终端，进入WordPress主题目录，执行以下命令初始化npm项目：
npm init -y
初始化完成后，安装Tailwind CSS以及相关的构建依赖：
npm install -D tailwindcss postcss autoprefixer
安装完成后，执行以下命令生成Tailwind的配置文件：
npx tailwindcss init
此时主题目录下会出现tailwind.config.js和postcss.config.js两个配置文件，后续需要修改tailwind.config.js来指定需要扫描的文件路径。
配置Tailwind扫描规则
打开tailwind.config.js文件，修改content字段，指定WordPress主题中所有会使用Tailwind工具类的文件路径，避免构建时遗漏样式：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./**/*.php", // 扫描所有php文件
"./assets/js/**/*.js" // 如果有自定义js文件也一并扫描
],
theme: {
extend: {},
},
plugins: [],
}
创建Tailwind入口文件
在主题目录下新建src文件夹，在src文件夹中创建input.css作为Tailwind的样式入口文件，内容如下：
@tailwind base; @tailwind components; @tailwind utilities;
这三行代码会分别引入Tailwind的基础样式、组件样式和工具类样式，是Tailwind正常工作的必要引入。
配置构建脚本
打开主题目录下的package.json文件，在scripts字段中添加开发和生产环境的构建命令：
{
"name": "tailwind-wp-theme",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "tailwindcss -i ./src/input.css -o ./style.css --watch",
"build": "tailwindcss -i ./src/input.css -o ./style.css --minify"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5"
}
}
dev命令会在开发时监听文件变化，自动更新style.css，build命令会构建压缩后的生产环境样式文件。
引入样式到WordPress主题
打开主题目录下的functions.php文件，添加样式引入的代码，让WordPress加载构建后的style.css：
<?php
function tailwind_wp_theme_enqueue_styles() {
// 引入构建后的Tailwind样式
wp_enqueue_style(
'tailwind-wp-theme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'tailwind_wp_theme_enqueue_styles');
?>
测试集成效果
在终端中执行开发命令：
npm run dev
然后打开主题目录下的index.php文件，添加一段使用Tailwind工具类的测试代码：
<?php get_header(); ?>
<div class="max-w-4xl mx-auto p-6">
<h1 class="text-3xl font-bold text-blue-600 mb-4">Tailwind CSS集成测试</h1>
<p class="text-gray-700 leading-relaxed">如果这段文字应用了Tailwind的样式，说明集成已经成功。</p>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">测试按钮</button>
</div>
<?php get_footer(); ?>
启动WordPress本地服务，访问站点首页，如果标题显示为蓝色加粗大字体，按钮有蓝色背景和 hover 效果，说明Tailwind CSS已经成功集成到WordPress主题中。
生产环境构建
当主题开发完成后，执行生产构建命令：
npm run build
构建完成后style.css会被压缩，体积更小，适合生产环境使用。此时可以关闭开发命令，将主题部署到服务器即可。
常见问题说明
- 如果修改了php文件后样式没有更新，需要检查
tailwind.config.js中的content路径是否正确，确保新增的文件在扫描范围内。 - 如果样式没有生效，检查
functions.php中的样式引入是否正确，以及src/input.css是否正确引入了Tailwind的三个指令。 - 开发过程中需要保持
npm run dev命令运行，才能实时看到样式变化。
Tailwind_CSSWordPress主题前端开发样式集成修改时间：2026-07-06 22:54:33