关于 Tailwind CSS 任意值

我从 2018 年开始使用 Tailwind CSS，我非常喜欢这个框架。它非常灵活、强大，并且让编写 CSS 变得非常愉快。

以下是我在使用 Tailwind CSS 任意值为组件编写自定义样式时的一些最喜欢的技巧。其中一些在官方文档中有介绍，有些我找不到（也许它们是隐藏的宝石），还有一些只是我自己的个人技巧。

NOTE

下面的所有示例都是用 React 编写的，因为我猜 Tailwind 主要是与前端框架一起使用的。

任意值

任意值是指在 Tailwind CSS 配置中未预定义的值。我们使用方括号注释 [] 来动态生成带有任何值的类：

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

这将输出以下 CSS：

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

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

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

输出 CSS：

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

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

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

你可以去掉 var(...) 包装器，只提供变量名就足够了：

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

这将输出以下 CSS：

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

但对于具有回退值到另一个变量的变量，我们仍然需要使用 var(...) 包装器：

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

输出 CSS：

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

CSS 变量可以通过内联样式注入到 DOM 中，如下所示：

<div style={{ '--song-color': '#f00' }} />

但使用任意值，我们可以这样做：

<div className="[--song-color:#f00]" />

这将输出与上面相同的 CSS 变量声明。

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

<div className='[background-image:url("/static/images/black-grit.png")]' />

我们必须从任意类中删除空格以使其工作，或者使用下划线符号 _ 以获得更好的可读性：

<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:100%_50%]" />

这在与变量一起使用时非常有用，例如：

<div className="bg-[color:--variable]" />
// 或者只是 `bg-[--variable]`

将输出背景颜色的 CSS：

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

而添加 length: 前缀将输出 background-size 的 CSS：

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

输出：

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

这些是我在使用 Tailwind CSS 任意值时的一些最喜欢的笔记。你有其他技巧吗？请在评论区告诉我

愉快地样式化（使用 Tailwind CSS）