前言
Gutenberg 是 WordPress 的一个现代化编辑器，旨在为用户提供更加灵活和直观的编辑方式。尽管 Gutenberg 深受欢迎，但其内置的默认样式可能并不符合每个人的需求。这时候，我们可以考虑使用一个流行的 CSS 框架，如 Tailwind CSS 来进行自定义样式的开发。 在这篇文章中，我们将讨论如何在 Gutenberg 中使用 Tailwind CSS 来进行前端开发。
什么是 Tailwind CSS？
Tailwind CSS 是一个完全可定制化的 CSS 框架。它相对于其他框架的优势在于，它不会限制你的设计风格，而是提供了一些高度可配置的 CSS 类，以便于你构建独特的网站和应用程序。Tailwind CSS 主要包括以下特点：
- 高度可定制：所有的 CSS 类都是可定制的。你可以轻松地自定义每个类的属性和样式。
- 功能丰富：Tailwind CSS 提供了大量的预定义类，例如 flex, grid, typography 等等。这些都可以快速地让你的代码编写速度大大提高。
- 可读性强：Tailwind CSS 的代码可读性非常高。你可以轻松地在 CSS 文件中查找和修改类，这也方便了团队协作。
如何在 Gutenberg 中使用 Tailwind CSS？
第一步：安装 Tailwind CSS
安装 Tailwind CSS 就像安装任何其他的前端库一样。首先要在工程中安装 Tailwind CSS,
npm install tailwindcss
在运行安装 Tailwind CSS 命令时，你可以通过 tailwind.config.js 文件来配置你的样式。将以下代码添加到 tailwind.config.js 中:
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}第二步：在 Gutenberg 中集成 Tailwind CSS
Gutenberg 中，你可以通过以下步骤来集成 Tailwind CSS：
创建一个新的主题并命名为 tailwindcss-theme。
下载与你 WordPress 版本相匹配的 Gutenberg 插件开发模版
npx @wordpress/create-block@wp-scripts tailwindcss-block
- 在 frontend.js 文件中，引入 Tailwind CSS 并配置样式。
import './tailwind.css'; [...]
- 在根目录下创建一个 tailwind.css 文件，并在其中添加以下代码：
@tailwind base; @tailwind components; @tailwind utilities;
通过这种方式，你可以获得 Tailwind CSS 的所有类和属性。
第三步：使用 Tailwind CSS 构建 Gutenberg 模块
为了演示如何使用 Tailwind CSS 来构建 Gutenberg 模块，我们将创建一个非常简单的模块。这个模块包括一个容器和一个段落元素，它们都使用 Tailwind CSS 进行定制。
在工程根目录，打开 generated block 的路径 /path/to/tailwindcss-block/src/index.js.
-- -------------------- ---- -------
- --------- ------ - -
--- -- - ---------------
--- ------------- - ---------------------------
------------------------- -------------------------------- -
----- -------- -- -
--- ---------- - ----------------
------ ---
------
-----------
---
----
-
---------------------- ---------- ---- ---- ------------
--
------ ----------
-
--
--
----- -------- -- -
--- ---------- - ---------------------
------ ---
------
-----------
---
----
-
---------------------- ---------- ---- ---- ------------
--
------ ----------
-
--
--
- --
-- ---------------- - --需要注意的一点是, 类名添加到 JSX 元素上时，需要使用 className 属性, 这是因为 class 是 Javascript 中的一个保留字。
在上面的代码中，我们使用了 bg-blue-500 text-white px-4 py-2 text-center 这些 Tailwind CSS 类。
bg-blue-500: 元素背景颜色设为蓝色，这里的 500 表示蓝色的级别。text-white: 元素文字颜色设为白色。px-4 py-2: 元素内填白设为 4 和 2 个像素。text-center: 将元素文本对齐置中。
至此，我们已经成功了用 Tailwind CSS 构建了 Gutenberg 模块。
总结
在这篇文章中，我们学习了如何在 Gutenberg 中使用 Tailwind CSS 进行前端开发。我们了解了 Tailwind CSS 的特性，并通过一个简单的例子演示了如何在一个 Gutenberg 模块中使用 Tailwind CSS 类。希望这篇文章能够帮助你更好地使用 Gutenberg 和 Tailwind CSS 来构建现代化的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a281af48841e9894ee7bcc