Tailwind-颜色 · Detached

在 Tailwind CSS 项目中使用和自定义颜色调色板。

Tailwind CSS 开箱即用地包含了一个庞大而美观的颜色调色板，由专家设计师精心制作，适用于各种不同的设计风格。

默认调色板中的每种颜色都包含 11 个 steps，其中 50 最浅，950 最深

html

<div>
  <div class="bg-sky-50"></div>
  <div class="bg-sky-100"></div>
  <div class="bg-sky-200"></div>
  <div class="bg-sky-300"></div>
  <div class="bg-sky-400"></div>
  <div class="bg-sky-500"></div>
  <div class="bg-sky-600"></div>
  <div class="bg-sky-700"></div>
  <div class="bg-sky-800"></div>
  <div class="bg-sky-900"></div>
  <div class="bg-sky-950"></div>
</div>

整个颜色调色板可用于所有与颜色相关的实用程序，包括背景颜色、边框颜色、填充、光标颜色等等。

使用颜色

使用颜色实用程序

使用颜色实用程序（如 bg-white、border-pink-300 和 text-gray-950）来设置设计中元素的不同颜色属性

以下是使用您的颜色调色板的实用程序的完整列表

实用程序	描述
`bg-*`	设置元素的背景颜色
`text-*`	设置元素的文本颜色
`decoration-*`	设置元素的文本装饰颜色
`border-*`	设置元素的边框颜色
`outline-*`	设置元素的轮廓颜色
`shadow-*`	设置阴影的颜色
`inset-shadow-*`	设置内阴影的颜色
`ring-*`	设置环形阴影的颜色
`inset-ring-*`	设置内环形阴影的颜色
`accent-*`	设置表单控件的强调色
`caret-*`	设置表单控件中的光标颜色
`fill-*`	设置 SVG 元素的填充颜色
`stroke-*`	设置 SVG 元素的描边颜色

调整不透明度

您可以使用类似 bg-black/75 的语法来调整颜色的不透明度，其中 75 将颜色的 alpha 通道设置为 75%

html

<div>
  <div class="bg-sky-500/10"></div>
  <div class="bg-sky-500/20"></div>
  <div class="bg-sky-500/30"></div>
  <div class="bg-sky-500/40"></div>
  <div class="bg-sky-500/50"></div>
  <div class="bg-sky-500/60"></div>
  <div class="bg-sky-500/70"></div>
  <div class="bg-sky-500/80"></div>
  <div class="bg-sky-500/90"></div>
  <div class="bg-sky-500/100"></div>
</div>

此语法还支持任意值和 CSS 变量简写

html

<div class="bg-pink-500/[71.37%]"><!-- ... --></div>
<div class="bg-cyan-400/(--my-alpha-value)"><!-- ... --></div>

在 CSS 中引用

颜色在 --color-* 命名空间中作为 CSS 变量公开，因此您可以使用类似 --color-blue-500 和 --color-pink-700 的变量在 CSS 中引用它们

css

@import "tailwindcss";

@layer components {
  .typography {
    color: var(--color-gray-950);
    a {
      color: var(--color-blue-500);
      &:hover {
        color: var(--color-blue-800);
      }
    }
  }
}

您还可以将这些用作实用程序类中的任意值

html

<div class="bg-[light-dark(var(--color-white),var(--color-gray-950))]">
  <!-- ... -->
</div>

要在 CSS 中引用颜色作为变量时快速调整颜色的不透明度，Tailwind 包含一个特殊的 --alpha() 函数

css

@import "tailwindcss";

@layer components {
  .DocSearch-Hit--Result {
    background-color: --alpha(var(--color-gray-950) / 10%);
  }
}

自定义颜色

使用 @theme 在 --color-* 主题命名空间下为您的项目添加自定义颜色

css

@import "tailwindcss";

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

现在，除了默认颜色之外，您的项目中还将提供 bg-midnight、text-tahiti 和 fill-bermuda 等实用程序。

在主题变量文档中了解有关主题变量的更多信息。

覆盖默认颜色

通过使用相同名称定义新的主题变量来覆盖任何默认颜色

css

@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);
}

禁用默认颜色

通过将该颜色的主题命名空间设置为 initial 来禁用任何默认颜色

css

@import "tailwindcss";

@theme {
  --color-lime-*: initial;
  --color-fuchsia-*: initial;
}

这对于从不打算使用的颜色的输出中删除相应的 CSS 变量尤其有用。

使用自定义调色板

使用 --color-*: initial 完全禁用所有默认颜色并定义您自己的自定义颜色调色板

css

@import "tailwindcss";

@theme {
  --color-*: initial;
  --color-white: #fff;
  --color-purple: #3f3cbb;
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

引用其他变量

在定义引用其他颜色的颜色时，使用 @theme inline

css

@import "tailwindcss";

:root {
  --acme-canvas-color: oklch(0.967 0.003 264.542);
}

[data-theme="dark"] {
  --acme-canvas-color: oklch(0.21 0.034 264.665);
}

@theme inline {
  --color-canvas: var(--acme-canvas-color);
}

在关于引用其他变量的主题文档中了解更多信息。

评论