探索 Tailwind 4 中的 Typesafe 设计令牌

tailwind 4 已经面世一段时间了，团队于 2024 年 3 月首次开源了他们的进展。在我看来，最值得注意的变化之一是从基于 javascript 的配置转向 css为基础的一。 tailwind 4 目前处于测试阶段，据我所知，团队仍在应对一些挑战，特别是 safari 兼容性。

注意：在本文后面，我们将假设您使用基于组件的框架/库，但所讨论的概念可以轻松转移到其他方法。

《顺风4》的变化

迁移到 css 配置

我听到了一些对此的抱怨，尤其是来自 typescript 用户的抱怨。然而，tailwind 4.0 的路线图确实包括对经典 tailwind.config.js 的支持作为其首要任务：

支持 javascript 配置文件 - 重新引入与经典 tailwind.config.js 文件的兼容性，以便轻松迁移到 v4。

也就是说，这似乎主要是为了迁移目的，可能不是一个可持续的长期解决方案。

这对于类型安全意味着什么

在底层，tailwind 4 使用新的 @property css 规则来定义内部自定义属性。

我们使用 @property 来定义具有适当类型和约束的内部自定义属性

就目前情况而言，我无法在 vs 代码中找到对 @property 规则的语法高亮支持，我已经联系了 bluesky，看看是否有人比我更幸运。

我希望更好的@property 支持将来能够为我们提供帮助，稍后会详细介绍。

@property css 规则是什么

@property 规则表示直接在样式表中注册自定义属性，而无需运行任何 javascript。有效的 @property 规则会生成已注册的自定义属性，这类似于使用等效参数调用 registerproperty()。

什么是设计令牌

现在我们已经介绍了 tailwind 4 中即将发生的变化及其潜在影响，让我们花点时间讨论一下设计令牌。如果您不熟悉这个术语，这里有一个快速解释：设计令牌是一种以一致、可重用的格式（通常作为变量）存储和管理设计决策的方法。它们以结构化的方式代表了设计系统的关键视觉属性，例如颜色、排版、间距、阴影。目标是集中这些设计值，以便它们可以在不同的平台和工具之间轻松更新、维护和共享。

设计系统通常由两种主要类型的值组成：系统值和组件值。例如，您的系统值可能如下所示：

const system_tokens: isystemtokens = {
  /* ... */
  colors: {
    /* ... */
    green: {
      light: "#e0e5d9",
      medium: "#3f6212",
      dark: "#28331a",
    }
    /* ... */
  },
  typography: {
    /* ... */
  }
  /* ... */
}

登录后复制

然后，您可以在组件令牌中引用系统值，如下所示：

import { system_tokens } from "...";

const button_values: ibuttontokens = {
  /* ... */
  colors: {
    /* ... */
    background: system_tokens.colors.green.dark,
    /* ... */
  },
  typography: {
    /* ... */
  }
  /* ... */
}

登录后复制

如果您有兴趣了解有关设计系统的更多信息，那么值得探索像 material design 这样的知名系统。

使用 tailwind 构建组件设计令牌

大约一周前，我写了一篇文章，讨论我一直使用的使用 tailwind css 创建组件变体的替代方法。简而言之，本文探讨了如何利用 css 变量和 tailwind 来管理复杂的变体，通过动态组件属性和变量映射内联设置变体值。如果您对我是如何得出这种方法感到好奇，您可以在这里阅读更多相关内容：使用 tailwind css 编写组件变体的不同方法。

我们应该首先识别组件中依赖于设计令牌的部分。如前所述，这将包括颜色、排版、间距以及设计中不可或缺的任何其他固定系统值。让我们看一下以下没有设计标记的 button 组件：

<button class="p-4 bg-red text-white rounded-lg relative flex justify-center">click me</button>

登录后复制 登录后复制

在上面的示例中，我们可以确定几个可以标记化的值。以下每个类都可以对应于我们设计系统中的一个值：

• p-4
• 背景-红色
• 文本-白色

现在我们已经确定了可以标记化的值，我们可以将它们分为两组：静态值和动态值。静态值是组件中保持不变的值，而动态值是可以根据传递给组件的 props 进行更改的值。对于我们的示例，我们将使填充 (p-4) 静态，而文本颜色 (text-white) 和背景 (bg-red) 应通过主题属性动态设置。

创建令牌

顺风4配置

首先，我们需要在新的 tailwind css 配置中定义系统令牌：

@import "tailwindcss";

@theme {
  --color-white: #ffffff;
  --color-green-light: #e0e5d9;
  --color-green-medium: #3f6212;
  --color-green-dark: #28331a;
  --color-red-light: #f4cccc;
  --color-red-medium: #d50000;
  --color-red-dark: #640000;

  --spacing-sm: 1rem;
  --spacing-md: 2rem;
}

登录后复制

系统令牌

接下来我们需要创建 system.tokens.ts 文件：

export type tcolor = "--color-white" | "--color-green-light" | "--color-green-medium" | "--color-green-dark" | "--color-red-light" | "--color-red-medium" | "--color-red-dark";

export type tspacing = "--spacing-sm" | "--spacing-md";


interface isystemtokens {
  colors: {
    white: tcolor;
    green: {
      light: tcolor;
      medium: tcolor;
      dark: tcolor;
    },
    red: {
      light: tcolor;
      medium: tcolor;
      dark: tcolor;
    }
  },
  spacing: {
    small: tspacing;
    medium: tspacing;
  }
}

export const  system_tokens: isystemtokens {
  colors: {
    white: "--color-white";
    green: {
      light: "--color-green-light";
      medium: "--color-green-light";
      dark: "--color-green-light";
    },
    red: {
      light: "--color-red-light";
      medium: "--color-red-medium";
      dark: "--color-red-dark";
    }
  },
  spacing: {
    small: "--spacing-sm";
    medium: "--spacing-md";
  }
}

登录后复制

系统设计令牌可以在设计中引用，如下所示：
$system.colors.green.light.

在理想的世界中，我们可以直接将 css 文件的 @property 规则中的类型导出到 tcolor 和 tspacing 类型中，就像 scss 导入如何转换为 javascript 一样。不幸的是，据我所知，目前这是不可能的。

组件代币

现在我们已经实现了系统令牌，我们可以开始将它们集成到我们的组件中。第一步是设置 .tokens.ts 文件。为了说明这一点，我们以前面看到的 button 组件为例，并创建一个相应的 button.tokens.ts 文件。

回顾一下，我们的 button 组件的结构如下：

<button class="p-4 bg-red text-white rounded-lg relative flex justify-center">click me</button>

登录后复制 登录后复制

之前，我们讨论了静态值（如 p-4）和动态值（如 bg-red 和 text-white）之间的区别。这种区别将指导我们如何组织我们的设计令牌。静态属性（如 p-4）应分组在 static 下，而动态属性（如 bg-red 和 text-white）应分组在适当的 prop 标识符下。在这种情况下，由于我们通过 theme 属性控制 bg-red 和 text-white，因此它们应该放置在令牌文件中的 theme 部分下。对于我们的示例，我们将假设 2 个主题变量 - primary 和 secondary。

import { system_tokens, tcolor, tspacing } from "./system.tokens.ts";
import { ttheme } from "./button"; // primary, secondary

interface ibuttonstatictokens {
  padding: tspacing;
}

interface ibuttonthemetokens {
  backgroundcolor: tcolor;
  textcolor: tcolor;
}

export const static: ibuttonstatictokens {
  padding: "--spacing-sm";
}

export const theme: ibuttonstatictokens {
  primary: {
    backgroundcolor: "--color-red-dark";
    textcolor: "--color-red-light";
  },
  secondary: {
    backgroundcolor: "--color-green-dark";
    textcolor: "--color-green-light";
  };
}

登录后复制

组件设计标记可以在设计中引用，如下所示：$component.button.theme.primary.backgroundcolor。我对命名约定的偏好是使用：
$component. . .tokenname

$component：区分 $system 和 $component 令牌
：遵循组件的内部文件命名约定
prop_name：常量大小写
prop_value：应遵循内部 prop 值大小写
代币名称（背景颜色）：驼峰式*

这最终是个人喜好问题，由您决定什么最适合您的工作流程。

• 在命名标记时，如果我需要为元素的状态指定标记，例如 :hover，我会稍微偏离驼峰式大小写。在这些情况下，我会在令牌名称前添加状态前缀，后跟两个下划线，如下所示：hover__backgroundcolor.

在组件中使用设计令牌

正如我在文章前面提到的，我之前写过关于探索使用 tailwind css 编写组件变体的不同方法的文章。我将在这里引用该方法，所以如果您还没有阅读过它，首先查看它可能会有所帮助，以了解该方法背后的上下文。

本文的这一部分将假设您正在使用 javascript 框架或库来构建组件。

更新按钮组件

我们需要将现有的 tokenisable 类替换为由 css 变量支持的 tailwind 类。请注意，变量名称与我们的 2 个 button 组件令牌接口 ibuttonstatictokens 和 ibuttonthemetokens 中的变量名称相匹配；

<button class="p-[--padding] bg-[--backgroundcolor] text-[--textcolor] rounded-lg relative flex justify-center">click me</button>

登录后复制

现在我们已经更新了类，我们需要动态应用组件样式并更新变量。为了实现这一点，我们将在组件上使用variablemap 函数。本质上，这个函数将我们的标记从 button.tokens.ts 直接映射到组件上的内联 css 变量，然后我们的类可以引用这些变量。有关变量映射的示例，请参阅本文末尾。

[removed]
import { variableMap } from "...";
import { STATIC, THEME } from "Button.tokens.ts";

const props = /*THEME*/
[removed]

登录后复制

结论

我期待着 tailwind 4 的发布以及团队从现在到那时所做的改变。我喜欢尝试各种想法来应对设计令牌、变体和类型安全方面的一些挑战。

这是一种实验性方法，我相信会有一些强烈的意见。

如果您觉得这篇文章有趣或有用，请在 bluesky（我在这里最活跃）、medium、dev 和/或 twitter 上关注我。

以上就是探索 Tailwind 4 中的 Typesafe 设计令牌的详细内容，更多请关注慧达安全导航其它相关文章！