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 一样。不幸的是，据我所知，目前这是不可能的。
组件代币
现在我们已经实现了系统令牌，我们可以开始将它们集成到我们的组件中。第一步是设置 <component>.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.<componentname>.<prop_name><prop_value>.tokenname
$component：区分 $system 和 $component 令牌
<componentname>：遵循组件的内部文件命名约定
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 变量，然后我们的类可以引用这些变量。有关变量映射的示例，请参阅本文末尾。
<template>
<button
:style="[variableMap(STATIC), variableMap(THEME[props.THEME])]"
class="p-[--padding] bg-[--backgroundColor] text-[--textColor]
rounded-lg relative flex justify-center"
>
Click me
</button>
</template>
<script setup lang="ts">
import { variableMap } from "...";
import { STATIC, THEME } from "Button.tokens.ts";
const props = /*THEME*/
</script>
结论
我期待着 tailwind 4 的发布以及团队从现在到那时所做的改变。我喜欢尝试各种想法来应对设计令牌、变体和类型安全方面的一些挑战。
这是一种实验性方法，我相信会有一些强烈的意见。
如果您觉得这篇文章有趣或有用，请在 bluesky（我在这里最活跃）、medium、dev 和/或 twitter 上关注我。
