Knots

Appearance

指定样式生效的条件 ​

即 variant 变体，那个写在 : 前面的东东。

还记得 css 里面的伪类吗？

语法和功能上都一模一样：在特定情况下应用指定样式。

variant 就是 Tailwind CSS 将这个概念利用了起来，不光自己添加了很多变体、丰富了应用面，还可以让开发者定义自己的变体。

常见的 Variant 示例 ​

1. 状态变体 - 用户交互时 ​

html
<!-- 正常情况下是蓝色，鼠标悬停时变深蓝色 -->
<button class="bg-blue-500 hover:bg-blue-700">
  点击我
</button>

<!-- 聚焦时显示边框 -->
<input class="border focus:border-blue-500">

2. 响应式变体 - 不同屏幕尺寸 ​

html
<!-- 手机上是1列，平板2列，电脑4列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <!-- 内容 -->
</div>

<!-- 小屏幕隐藏，中屏幕显示 -->
<div class="hidden md:block">只在平板+显示</div>

3. 黑暗模式变体 ​

html
<!-- 白天白色背景，黑夜黑色背景 -->
<div class="bg-white dark:bg-gray-900">
  内容
</div>

4. 其他常用变体 ​

html
<!-- 第一个子元素 -->
<li class="first:font-bold">第一项</li>

<!-- 奇数行 -->
<tr class="odd:bg-gray-100">奇数行</tr>

<!-- 被选中的选项 -->
<option class="checked:bg-blue-500">选项</option>

Variant 的工作原理 ​

可以理解为「条件包装」：

  • bg-blue-500 → 总是蓝色背景
  • hover:bg-blue-700 → 只有悬停时变成深蓝
  • md:text-lg → 只在中等屏幕以上文字变大

为什么要用 Variant？ ​

所有状态都在一个地方定义，不需要在多个 CSS 文件/选择器之间跳转！

传统 CSS 写法：

css
.button {
  background: blue;
}

.button:hover {
  background: darkblue; /* 需要写新选择器 */
}

@media (min-width: 768px) {
  .button {
    font-size: 1.125rem; /* 需要写媒体查询 */
  }
}

Tailwind Variant 写法：

html
<button class="bg-blue-500 hover:bg-blue-700 md:text-lg">
  按钮
</button>

添加自定义变体 ​

除了使用 Tailwind 附带的变体之外，你还可以使用 @custom-variant 指令添加自己的自定义变体：

css
@custom-variant theme-midnight {
  &:where([data-theme="midnight"] *) {
    @slot;
  }
}

现在你可以在 HTML 中使用 theme-midnight:<utility> 变体：

html
<html data-theme="midnight">
  <button class="theme-midnight:bg-black ..."></button>
</html>

当不需要嵌套时，你可以使用简写语法创建变体：

css
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

当自定义变体具有多个规则时，它们可以相互嵌套：

css
@custom-variant any-hover {
  @media (any-hover: hover) {
    &:hover {
      @slot;
    }
  }
}