在前文中，我们已经知道了 Tailwind 的 theme 中定义了一些 colors 变量。

本节，我们以 colors 为例，总结一下 theme 中变量的重定义方式。

1.覆盖内置变量

@import "tailwindcss";

@theme {
  --color-gray-50: oklch(0.984 0.003 247.858);
  --color-gray-100: oklch(0.968 0.007 247.896);
  --color-gray-200: oklch(0.929 0.013 255.508);
  --color-gray-300: oklch(0.869 0.022 252.894);
  --color-gray-400: oklch(0.704 0.04 256.788);
  --color-gray-500: oklch(0.554 0.046 257.417);
  --color-gray-600: oklch(0.446 0.043 257.281);
  --color-gray-700: oklch(0.372 0.044 257.287);
  --color-gray-800: oklch(0.279 0.041 260.031);
  --color-gray-900: oklch(0.208 0.042 265.755);
  --color-gray-950: oklch(0.129 0.042 264.695);
}

2.新增变量

@import "tailwindcss";

@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

3.禁用内置变量

禁用内置变量，只需要将变量值设置为 initial 即可。

@import "tailwindcss";

@theme {
  --color-*: initial;

  --color-white: #fff;
  --color-purple: #3f3cbb;
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

TIP

--color-*: initial; 是禁用了所有 color 内置变量。

也可以使用 --color-sky-* 等形式来更细粒度的禁用 color 下的某些内置变量。