tailwindcss学习笔记之Theme variables

Tailwind是一个支持自定义设计的框架，不同的设计需要不同的typography， colors，shadows，breakpoints等等。Tailwind允许自定义这些值并存储在theme variables。

Theme variables是使用`@theme`指令定义的特殊变量，它们会影响项目中存在的工具类。

1、Theme variables初体验

1.1、input.css 中增加 @theme 指令

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

1.2、在html中使用`bg-mint-500`，`text-mint-500`，或者 `fill-mint-500`这样的工具类

<div class="bg-mint-500">
  <!-- ... -->
</div>

1.3、其它用法，Tailwind也会为theme variables生成普通的css变量，在行内使用var()调用

<div style="background-color: var(--color-mint-500)">
  <!-- ... -->
</div>

2、为什么用 `@theme` 取代 `:root` ?

Theme variables不仅仅是css变量，Theme variables还能指示Tailwind 去生成新的原子类以便在html中使用。

Tailwind使用特殊的语法`@theme`来确保theme variables的定义始终清晰明确。Theme variables必须定义为顶层变量，不能嵌套在其它选择器或者媒体查询之下啊。

结论：

当你想让一个设计令牌直接映射到实用类时，请使用 @theme ；

当你想定义一个不应有对应实用类的常规CSS变量时，请使用 :root 。

3、Theme variables 和 utility classes（原子类）的关系

Tailwind中很多工具类是由 theme variables 驱动的，并且它们的存在仅仅是因为你定义了 theme variables。

例如，theme variables 定义了 `--font-*` 命名空间决定了所有 `font-family`原子类在项目中存在

在 tailwindcss/theme.css 是这样定义的：

@theme {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* ... */
}

因为Tailwind 默认主题定义了 `--font-sans`，`--font-serif`, 和 `--font-mono` 主题变量，所以 `font-sans`，`font-serif`，`font-mono` 这些原子类才存在。

3.1、自定义一个theme variables

如果我们在主题变量中定义一个 `--font-poppins`，那么我们就可以使用 `font-poppins` 原子类。

定义`--font-poppins` 主题变量

@import "tailwindcss";
@theme {
  --font-poppins: Poppins, sans-serif;
}

使用 `font-poppins` 原子类

<h1 class="font-poppins">This headline will use Poppins.</h1>

4、Theme variables 和 variants（变体）的关系

有些 theme variables 通常用于定义变体，而不是原子类。比如 `--breakpoint-*` 命名空间的主题变体决定了项目中存在哪些响应式断点变体。示例：

@import "tailwindcss";
@theme {
  --breakpoint-3xl: 120rem;
}

 现在你可以使用 `3xl:*` 变体 来仅在视口宽度为120rem或更宽时触发一个原子类。

<div class="3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4">
  <!-- ... -->
</div>

5、Theme variable namespaces（主题变量命名空间）

Theme variables 定义在命名空间中，并且每一个命名空间对应 一个 或 多个  原子类 或 变体APIs。

5.1、Tailwind默认主题变量命名空间

注意：如果使用@theme定义新的上面的主题变量命名空间，那么会产生新的对应关系的原子类和工具类，简单来说就是重写覆盖Tailwind默认值。

这是所有的默认主题变量的列表，请点击查看Tailwind默认主题环境变量列表

5.2、自定义主题

5.2.1、扩展默认主题

@import "tailwindcss";
@theme {
  --font-script: Great Vibes, cursive;
}

上面的代码定义了一个新的名叫 `font-script` 的原子类，你可以在HTML代码中使用它，就像默认的 `font-sans`、`font-mono`等 ：

<p class="font-script">This will use the Great Vibes font family.</p>

5.2.2、覆写默认主题

@import "tailwindcss";
@theme {
  --breakpoint-sm: 30rem;
}

使用 @theme 重新定义 主题变量值，这样就覆盖了原来默认的配置。现在上面的配置 `sm:*` 将在 30rem 而不是默认的 40rem 视口尺寸触发。

<div class="grid grid-cols-1 sm:grid-cols-3">
  <!-- ... -->
</div>

5.2.3、使用一个自定义主题

设置全局的主题变量命名空间值为 `initial`，可以完全禁用默认的主题并且只能使用自定义的值。

@import "tailwindcss";
@theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
  --color-driftwood: oklch(0.79 0.06 74.59);
  --color-tide: oklch(0.49 0.08 205.88);
  --color-dusk: oklch(0.82 0.15 72.09);
}

现在所有的默认的原子类都不能使用，只能使用自定义主题变量里的内容，例如 `font-body` 、 `text-dusk`等。

5.2.4、引用其它变量

当定义主题变量引用了其它变量，并且使用 了`inline`（内联）选项时：

@import "tailwindcss";
@theme inline {
  --font-sans: var(--font-inter);
}

 使用了`inline`内联选项，表示原子类使用的是主题变量的值，而不是实际的主题变量。

如果不适用`inline`选项，因为CSS解析方式的问题，生成的原子类可能会解析为意外值。

5.2.5、生成所有的CSS变量

默认只有使用过的CSS变量才生成在最终的css输出文件中，如果你想输出所有的css 变量，可以在主题定义中使用 `static` 选项：

@import "tailwindcss";
@theme static {
  --color-primary: var(--color-red-500);
  --color-secondary: var(--color-blue-500);
}

5.2.6、扩项目共享主题变量

实际上就是新建一个theme.css文件，用来专门定义 `@theme`变量：

@theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
  --color-driftwood: oklch(0.79 0.06 74.59);
  --color-tide: oklch(0.49 0.08 205.88);
  --color-dusk: oklch(0.82 0.15 72.09);
}

然后在input.css 文件中使用 `@import`引入：

@import "tailwindcss";
@import "../brand/theme.css";