Tailwind 颜色令牌命名约定

Question

我的任务是在 Tailwind 中实现设计颜色标记。

令牌是按语义命名的，一些示例是：

• Text/Main/BodyPrimary

• Surface/Background/Secondary

• Border/Button/PrimaryOutline

我已使用

extend.colors

文件中的

tailwind.config.js

对象将这些令牌添加到 Tailwind，上面的令牌路径实现如下：

extend: {
  colors: {
    text: {
      main: {
        bodyPrimary: #ffffff,
      },
    },
  },
}

但是，由于 Tailwind 要求颜色预先固定其所应用的属性，因此我提供的令牌在实践中会导致笨拙的实现。

例如，上面的令牌必须按如下方式应用：

<p className="text-text-main-bodyPrimary">
  Hello
</p>

有没有办法将这种格式的令牌添加到 Tailwind 中，从而绕过它们所应用的属性的重复（例如

text-text...

、

border-border...

）？或者，我是否需要要求设计师重新编写标记而不使用诸如文本、背景、边框等文字？

Answer 1

color

(

text-<color>

)、

border-color

(

border-<color>

) 等的类拥有自己的对象键“组”以及从

colors

继承的值。这意味着您可以将令牌前缀映射到它们，例如：

令牌命名空间	Tailwind 配置键	类名前缀
Text	textColor	text
Surface	backgroundColor	bg
Border	borderColor	border

tailwind.config = {
  theme: {
    extend: {
      backgroundColor: {
        background: {
          // Surface/Background/Secondary
          secondary: 'darkblue',
        },
      },
      borderColor: {
        button: {
          // Border/Button/PrimaryOutline
          primaryOutline: 'lime',
        },
      },
      textColor: {
        main: {
          // Text/Main/BodyPrimary
          bodyPrimary: 'lightpink',
        },
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="bg-background-secondary border border-button-primaryOutline text-main-bodyPrimary">
  Foo
</div>