关于 Tailwind CSS 任意值的使用

我从 2018 年开始使用 Tailwind CSS，非常喜欢这个框架。 它非常灵活、强大，让编写 CSS 变得充满乐趣。

以下是我在使用 Tailwind CSS 任意值为组件编写自定义样式时的一些常用技巧。 其中一些在官方文档中有介绍，一些可能是我发现的隐藏宝藏（），还有一些是我个人的使用心得。

任意值

任意值是指那些没有在 Tailwind CSS 配置文件中预定义的值。 我们使用方括号标记 [] 来即时生成带有任意值的类名：

<div className="bg-[#f00]" />

这将生成以下 CSS：

.bg-\[\#f00\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 0 0 / var(--tw-bg-opacity)) /* #ff0000 */;
}

引用 design tokens

我们可以使用 theme() 函数来引用 tailwind.config.js 中定义的设计令牌：

<div className="[--song-color:theme(colors.gray.200)]" />

Output CSS:

.\[--song-color\:theme\(colors\.gray\.200\)\] {
  --song-color: #e5e7eb;
}

使用 CSS 变量

我们也可以使用 CSS 变量来生成任意值：

<div className="h-[--section-height]" />

这将生成以下 CSS：

<div className="h-[var(--section-height,var(--fallback-height))]" />

Output CSS:

.h-\[var\(--section-height\,var\(--fallback-height\)\)\] {
  height: var(--section-height, var(--fallback-height));
}

注入 CSS 变量

CSS 变量可以通过内联样式注入到 DOM 中，像这样：

开箱即用的工具类

对于 Tailwind CSS 默认不支持的属性，我们也可以使用方括号标记来编写完全任意的 CSS：

<div className="shadow-[6px_6px_12px_-1px_rgba(0,_0,_0,_0.1)]" />

解决命名空间冲突

许多 CSS 属性在 Tailwind CSS 中共享相同的命名空间，例如 bg-red-500 和 bg-cover，或者 text-gray-900 和 text-2xl。

为了避免使用任意值时发生冲突，我们可以在属性值前添加 CSS 数据类型 前缀（color:、length: 等）：

<div className="bg-[length:--variable]" />

Output:

.bg-\[length\:--variable\] {
  background-size: var(--variable);
}

以上是我在使用 Tailwind CSS 任意值时的一些常用技巧和心得。 如果你有其他好用的技巧，欢迎在评论区告诉我 Happy styling (with Tailwind CSS)