随着前端应用不断的复杂化，很多团队面临着大量的样式管理工作。Design Systems (设计系统) 成为了解决这个问题的一种流行的方式，它允许前端团队共享组件和样式，提高开发效率并保持应用在视觉上的一致性。在这个过程中，设计系统需要一个可维护的样式工具，这时候 Tailwind 便成为了一个备受欢迎的选择。本文将为大家介绍如何为 Design Systems 使用和管理 Tailwind。
Tailwind 简介
Tailwind 是一个 CSS 实用工具库，它允许你在 HTML 中使用短代码，并通过这些类名可以直接添加或修改元素的样式。与 Sass 和 Less 不同，Tailwind 不使用变量或混合。相反，它使用了大量的功能类来定义样式。这种方法让你不用去研究所有项目中的变量，而是简单地重用类名实现样式。并且使用功能类还可以减少不必要的全局样式，从而减小样式文件的大小，提高性能。
为了使用 Tailwind，你需要在你的应用中添加 Tailwind 的 NPM 依赖并配置它。这里有一个基本的 CSS 文件示例，包含了常见的 Tailwind 配置：
/* ./src/tailwind.css */ @tailwind base; @tailwind components; @tailwind utilities; /* Here you can also add customization if necessary */
这个文件使用了 Tailwind 提供并定义的三个 Creditable。 "@Tailwind base" 包含了一些一般的 HTML 样式，例如设置 fonts，设置基本的 box-sizing 。"@tailwind components" 为 UI 组件提供了样式，比如 buttons 和 form。 "@tailwind utilities" 提供了大量的工具，如将边距、宽度、背景色直接应用于 HTML 元素。
然而，在大多数项目中，你需要自定义这些功能和设置，例如选择字体、颜色配置和添加自定义组件等等。接下来我们将深入研究如何管理和使用 Tailwind。
自定义 Tailwind
当我们开始一个项目时，我们一般不想开始每个项目就要从头开始配置 Tailwind。幸运的是，Tailwind 允许你使用默认配置来开始，然后在需要时可以额外自定义。这里提供一些常见自定义：
颜色配置
在你的 tailwind.config.js 文件中，你可以添加自定义颜色集。默认情况下，Tailwind 提供了一个适合大多数场景的颜色集。
-- -------------------- ---- -------
-- --------------------
-------------- - -
------ -
------- -
------- -
-------- ----------
---------- ----------
-------- ----------
----- ----------
-------- ----------
------- ----------
------ ----------
----- ----------
--
--
--
--这里添加了一些新的颜色，例如 primary 和 secondary。 之后就可以在 HTML 文件使用这些自定义颜色了。
自定义组件
当你自己或你的组织使用了一些自定义的组件时，你可能需要在 Tailwind 中注册自定义的代码。 在这个例子中，我们假设我们有一个叫做 MyButton 的组件。 首先在 tailwind.config.js 中添加：
-- -------------------- ---- -------
-- --------------------
-------------- - -
------ -
------- -
------- -
-------- ----------
---------- ----------
-------- ----------
----- ----------
-------- ----------
------- ----------
------ ----------
----- ----------
--
----------- -
--------- -
---------- ----- ---- ---------- ---------- ------------
------ -
--- ---------- -------------
--- -------- -------------
--
--------- -
-------- -
---------- --------- -------------- -------------- --------------
--
--
--
--
--
--
--这里我们定义了一个 MyButton 组件的样式，设定了背景颜色、圆角，字体大小等等。variants 选项允许我们使用修改函数，类似于 Sass/less 中的 Mixin。我们现在可以在应用中使用 MyButton 组件并且使用它的基本样式，大小和 out-line 变体。示例代码：
<!-- Example usage of "MyButton" component --> <MyButton>Default <MyButton> <MyButton size="md">Medium <MyButton> <MyButton variant="out-line">Outline <MyButton>
自定义工具类
有时，我们需要添加一些自定义的工具类来覆盖 Tailwind 内置的工具类，比如内外边距和宽度等，可以在 tailwind.config.js 文件中添加自定义工具。
-- -------------------- ---- -------
-- --------------------
-------------- - -
------ -
------- -
------- -
-------- ----------
---------- ----------
-------- ----------
----- ----------
-------- ----------
------- ----------
------ ----------
----- ----------
--
--
--
--------- -
------- -
------- --------- --------
-
--
-------- ---
-这个例子中，我们添加了一个新的 margin 变体类 back-end and top-of-element 和尝试重写现有的 last 和 first 类。 这样我们可以轻松地使用 back-end、top-of-element 和 last、first 类来达到我们想要的样式效果。
使用 Tailwind 以创建 Design Systems
在我们介绍了如何自定义 Tailwind 后，我们可以开始考虑在 Design Systems 中使用 Tailwind 了。Design Systems 中一个好的系统应该简化及规范应用的外观和 UI 表现，而尽可能少地增加负担和冲突。使用 Tailwind 可以实现最高效地管理样式的方式。
1. 集成到 Design Systems 中
集成到 Design Systems 表示我们需要将 Tailwind 视为一种更深的组成部分，以便于组织样式和易于维护。 在这个例子中，我们使用 CSS 预处理器以及 Tailwind 的自定义配置文件扩展系统的基本样式。
/* ./style.css */
:root{
--color-primary:#007bff;
--color-secondary:#6c757d;
}// ./components.scss
@use "variables" as v;
.btn{
background-color:v.$color-primary;
color:black;
}-- -------------------- ---- -------
-- --------------------
-------------- - -
------ -
------- -
------- -
-------- -----------------------
---------- -------------------------
-------- ----------
----- ----------
-------- ----------
------- ----------
------ ----------
----- ----------
--
--
--
--这个例子展示了如何尝试集成我们的代码库以及自定义颜色变量。使用这种方法，我们可以在更高的抽象层次上组织我们的样式。
2. 组件库
通常，大型设计系统需要一个组件库，它可以减少代码的重复性并保持系统的一致性。使用一个中央组件库来管理 Design Systems 可以达到更高的复用度。
下面是一个使用组件库的示例：
首先，我们需要在项目中安装组件库 npm 包。如果我们想要使用一个名为 stylish-button 的组件，那么我们可以安装 @myorg/stylish-button：
npm i @myorg/stylish-button
随后需要在项目的package.json文件中添加这个库的版本信息和引用。
{
"dependencies": {
"bootstrap": "^5.1",
"@myorg/stylish-button": "^1.1.0"
}
}然后我们可以使用该组件库中的组件来创建新的指令。
<!-- Example usage of "StylishButton" component --> <StylishButton>Default <StylishButton> <StylishButton size="md">Medium <StylishButton> <StylishButton variant="out-line">Outline <StylishButton>
使用这种方法，我们可以整合组件库中的元素，并以一致且可重复使用的方式构建 Design Systems。
总结
在本文中，我们深入了解了如何管理和使用 Tailwind 来创建更吸引人且符合标准的 Design Systems。我们验证了 Tailwind 自身的能力，并了解了如何在项目中使用自定义的代码库和组件库。 现在，你应该能够在 Design Systems 中更好地使用和管理 Tailwind，以将 Design Systems 的管理变得简单、灵活和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b74c7cadd4f0e0fffddf99