如何为 Design Systems 使用和管理 Tailwind-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用不断的复杂化，很多团队面临着大量的样式管理工作。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 提供了一个适合大多数场景的颜色集。

// ./tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#007bff",
        secondary: "#6c757d",
        success: "#28a745",
        info: "#17a2b8",
        warning: "#ffc107",
        danger: "#dc3545",
        light: "#f8f9fa",
        dark: "#343a40",
      },
    },
  },
};

这里添加了一些新的颜色，例如 primary 和 secondary。之后就可以在 HTML 文件使用这些自定义颜色了。

自定义组件

当你自己或你的组织使用了一些自定义的组件时，你可能需要在 Tailwind 中注册自定义的代码。在这个例子中，我们假设我们有一个叫做 MyButton 的组件。首先在 tailwind.config.js 中添加：

// ./tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#007bff",
        secondary: "#6c757d",
        success: "#28a745",
        info: "#17a2b8",
        warning: "#ffc107",
        danger: "#dc3545",
        light: "#f8f9fa",
        dark: "#343a40",
      },
      components: {
        MyButton: {
          baseStyle: "px-4 py-2 rounded-lg bg-primary text-white",
          sizes: {
            md: "text-base font-medium",
            sm: "text-sm font-medium",
          },
          variants: {
            outline: {
              baseStyle: "border-2 border-primary bg-transparent text-primary",
            },
          },
        },
      },
    },
  },
};

这里我们定义了一个 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 文件中添加自定义工具。

// ./tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#007bff",
        secondary: "#6c757d",
        success: "#28a745",
        info: "#17a2b8",
        warning: "#ffc107",
        danger: "#dc3545",
        light: "#f8f9fa",
        dark: "#343a40",
      },
    },
  },
  variants: {
    extend: {
      margin: ['first', 'last'],
    }
  },
  plugins: [],
}

这个例子中，我们添加了一个新的 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;
}

// ./tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        secondary: "var(--color-secondary)",
        success: "#28a745",
        info: "#17a2b8",
        warning: "#ffc107",
        danger: "#dc3545",
        light: "#f8f9fa",
        dark: "#343a40",
      },
    },
  },
};

这个例子展示了如何尝试集成我们的代码库以及自定义颜色变量。使用这种方法，我们可以在更高的抽象层次上组织我们的样式。

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