Page 1

如果你将 CSS 变量引用为任意值，则可以使用自定义属性语法：

<div class="fill-(--my-brand-color) ...">
    <!-- ... -->
</div>

这只是自动为您fill-[var(--my-brand-color)]添加功能的一种简写。var()

任意变体

任意变体就像任意值，但用于进行动态选择器修改，就像您可以使用内置伪类变体hover:{utility}或响应式变体一样，md:{utility}但在 HTML 中直接使用方括号表示法。

<ul role="list">
    {#each items as item}
    <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li>
    {/each}
</ul>

处理空格

当任意值需要包含空格时，请使用下划线 ( _)，Tailwind 会在构建时自动将其转换为空格：

<div class="grid grid-cols-[1fr_500px_2fr]">
    <!-- ... -->
</div>

在极少数情况下，您实际上需要使用下划线，但由于空格也有效，因此它会产生歧义，请使用反斜杠转义下划线，Tailwind 不会将其转换为空格：

<div class="before:content-['hello\_world']">
    <!-- ... -->
</div>

如果您使用类似 JSX 的东西，其中反斜杠从呈现的 HTML 中删除，请使用String.raw()，这样反斜杠就不会被视为 JavaScript 转义字符：

<div className={String.raw`before:content-['hello\_world']`}>
  <!-- ... -->
</div>