Tailwind CSS 是一种基于原子类的 CSS 框架，为用户提供了一种构建完全自定义的样式的方法。它提供了很多方便的类来快速创建复杂的布局。如果你是一个 WordPress 开发者，并且希望在你的项目中使用 Tailwind CSS，那么本文将向你展示如何使用 Tailwind CSS 在 WordPress 项目中构建你的样式。
步骤 1：安装 Tailwind CSS
使用 NPM 安装 Tailwind CSS：
npm install tailwindcss
安装成功后，创建一个新的配置文件 tailwind.config.js，如果已有文件，请略过此步骤。
npx tailwindcss init
此命令将在项目的根目录下创建 tailwind.config.js 文件。在文件中，你可以自定义 Tailwind CSS 的所有选项。
步骤 2：创建样式文件
在项目根目录下的 styles 目录中创建一个新的样式表文件，可以命名为 styles.css 或者任何你喜欢的文件名。在文件头部引用 Tailwind CSS：
@tailwind base; @tailwind components; @tailwind utilities;
这行代码引用了所有的基础样式、组件和实用类，这样你就可以使用 Tailwind CSS 的所有类了。
步骤 3：自定义样式
在样式表中，你可以使用 Tailwind 提供的类，也可以定义自己的样式。代码示例：
-- -------------------- ---- ------- ---- - ------ ---- ---- ---------- ---------- ------------ - ---------- - ------ ------------ - -------- - ------ --------- -------- -------------- - ----- - ------ ------------- --------- ------------------- -
以上代码展示了如何定义一些自定义样式。在 btn 类中，使用了 Tailwind CSS 提供的 px-4、py-2、rounded-lg、text-white 和 bg-blue-600 类。这里还添加了一些自定义样式，如:hover 伪类和不同的字体、颜色和背景色。
如果你要使用更多的自定义样式，可以在 tailwind.config.js 文件中进行配置。
步骤 4：使用样式
在 WordPress 项目中，你可以通过以下两种方式来使用样式：
方式 1：在主题的 functions.php 文件中加入样式表
可以通过在 WordPress 主题的 functions.php 文件中加入你的样式表，使它在页面头部被引用。代码示例：
function add_my_stylesheet() {
wp_enqueue_style('my-styles', get_stylesheet_directory_uri() . '/styles/styles.css' );
}
add_action('wp_enqueue_scripts', 'add_my_stylesheet');这样，留意到 wp_enqueue_style 函数的第一个参数，它将被用来引用你的样式表。所以你需要将调用 wp_enqueue_style 函数的第一个参数的值（在代码示例中名为 'my-styles' 的值）作为样式名，传递给 wp_enqueue_style 函数。
方式 2：在 WordPress 子主题的 functions.php 文件中加入样式表
除了在 WordPress 主题的 functions.php 文件中加入样式表，你还可以在你的子主题的 functions.php 文件中加入样式表。这样做的好处是，你可以在更新主题时，不会丢失你的样式。代码示例：
function add_my_stylesheet() {
wp_enqueue_style('my-styles', get_stylesheet_directory_uri() . '/styles/styles.css' );
}
add_action('wp_enqueue_scripts', 'add_my_stylesheet');此外，WordPress 有许多插件可用于添加自定义样式。但是，我们在为 WordPress 项目添加样式时，最好避免使用插件。
总结
在本文中，我们介绍了如何在 WordPress 项目中使用 Tailwind CSS。我们讲解了如何安装 Tailwind CSS、创建样式表、自定义样式以及使用样式。希望这份指南对 WordPress 开发者来说是有用的。如果你想了解更多关于 Tailwind CSS 的内容，可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459c91e968c7c53b0be6c1b