TailwindCSS – 在WordPress主题开发中使用TailwindCSS

1 在WordPress主题开发中使用TailwindCSS

1.1 在WordPress主题中安装TailwindCSS

在终端工具中进入WordPress主题的文件夹中，使用以下命令安装TailwindCSS

npm install -D tailwindcss

1.2 在WordPress主题中使用TailwindCSS

然后在终端执行以下命令

npx tailwindcss init

命令执行完成之后会在该项目目录下生成一个tailwind.config.js文件，我们需要在这个文件中输入包含TailwindCSS类的路径模板，这个步骤是在WordPress主题中使用TailWindCSS的关键步骤。

比如说我们想要在主题的header.php中使用TailwindCSS，则tailwind.config.js的文件内容为

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./header.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

假设当前主题的目录结构如下

theme_root
│   404.php
│   archive.php
|   comments.php
|   etc...
|    
└───template-parts
│   │   content-none.php
│   │   content-page.php
|   |   etc...

如果我们想要在当前主题中使用TailwindCSS，则tailwind.config.js文件的内容为

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./template-parts/*.{php,html,js}","./*.{php,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后在主题的文件夹中创建一个src文件夹，并创建一个input.css的文件，并在该文件中写入以下内容

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在终端中执行以下命令

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

通过这命令会实时监控主题目录下的代码文件，并将主题中使用的css样式输出到dist/output.css中。

最后一步就是在WordPress中引入dist/output.css文件，在主题的function.php中输入以下代码

function stubborn_your_theme_scripts() {
    wp_enqueue_style( 'output', get_template_directory_uri() . '/dist/output.css', array() );
}
add_action( 'wp_enqueue_scripts', 'stubborn_your_theme_scripts' );

通过wp_enqueue_scripts在主题中引入dist/output.css文件，这样就可以在WordPress中使用TailwindCSS进行Web界面的开发了。

参考

• https://codingoblin.com/install-tailwindcss-in-wordpress-theme/
• https://css-tricks.com/adding-tailwind-css-to-wordpress-themes/
• https://bonnick.dev/posts/tailwind-css-with-wordpress