WordPress 开发中如何使用 Tailwind CSS

本文介绍如何在 WordPress 项目中使用 Tailwind CSS + PostCSS 搭建一个简洁的样式构建流程。

1. 初始化与安装依赖

首先在项目根目录初始化 npm：

npm init -y

然后安装 Tailwind 与 PostCSS 相关依赖：

npm install -D tailwindcss @tailwindcss/postcss postcss postcss-cli

为什么使用 -D

-D 是 --save-dev 的简写，用于将依赖安装到devDependencies（开发依赖）中。

npm install -D package-name

等价于

npm install --save-dev package-name

这些工具只在开发阶段用于构建和编译 CSS，例如：

tailwindcss：生成 Tailwind 工具类
postcss：CSS 处理器
@tailwindcss/postcss：Tailwind 的 PostCSS 插件
postcss-cli：通过命令行执行 CSS 编译

在生产环境中，浏览器只需要加载最终生成的 CSS 文件，因此这些依赖不需要参与项目运行。

2. 创建 PostCSS 配置文件

在项目根目录创建 postcss.config.js 文件：

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

该配置用于告诉 PostCSS 使用 Tailwind 作为插件处理 CSS。

3. 配置构建脚本

在 package.json 中增加脚本：

{
  "scripts": {
  "dev": "postcss src/css/tailwind.css -o assets/css/theme.css --watch",
  "build": "postcss src/css/tailwind.css -o assets/css/theme.css"
  }
}

脚本说明

dev

postcss src/css/tailwind.css -o assets/css/theme.css --watch

作用：

将 src/css/tailwind.css 编译为普通 CSS
输出到 assets/css/theme.css
--watch 表示持续监听文件变化并自动重新编译

适用于开发阶段。

build

postcss src/css/tailwind.css -o assets/css/theme.css

作用：只执行一次 CSS 编译

4. 启动开发模式

运行：

npm run dev

此时 PostCSS 会持续监听 tailwind.css 的变化，并自动生成最新的 theme.css 文件。

5. 加载样式

使用 wp_enqueue_scripts 钩子加载样式。

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('slug', URI . 'assets/css/theme.css', [], VERSION, 'all');
}；

6. tailwind.css 文件参考

@import "tailwindcss";
@import "../icon/remixicon.css";

@theme {
  --color-primary-50: oklch(0.97 0.02 246);
  --color-primary-100: oklch(0.94 0.05 246);
  --color-primary-200: oklch(0.88 0.09 246);
  --color-primary-300: oklch(0.8 0.14 246);
  --color-primary-400: oklch(0.72 0.18 246);
  --color-primary-500: oklch(0.63 0.21 246);
  --color-primary-600: oklch(0.55 0.2 246);
  --color-primary-700: oklch(0.47 0.18 246);
  --color-primary-800: oklch(0.39 0.15 246);
  --color-primary-900: oklch(0.31 0.11 246);
  --color-primary-950: oklch(0.24 0.08 246);
  --color-title: oklch(13% 0.028 261.692);
  --color-text: oklch(37.2% 0.044 257.287);
  --color-description: oklch(55.1% 0.027 264.364);
  --breakpoint-lg: 1360px;
}

body {
  @apply text-text overflow-x-hidden;
}

@import "./layout/layout.css";
@import "./layout/header.css";
@import "./layout/footer.css";
@import "./component/button.css";