颜色

示例

基础示例

使用像 text-blue-600 和 text-sky-400 这样的工具来控制元素的文本颜色：

<p class="text-blue-600 dark:text-sky-400">快速的棕色狐狸...</p>

改变不透明度

使用颜色不透明度修饰符来控制元素的文本颜色不透明度：

<p class="text-blue-600/100 dark:text-sky-400/100">快速的棕色狐狸...</p>
<p class="text-blue-600/75 dark:text-sky-400/75">快速的棕色狐狸...</p>
<p class="text-blue-600/50 dark:text-sky-400/50">快速的棕色狐狸...</p>
<p class="text-blue-600/25 dark:text-sky-400/25">快速的棕色狐狸...</p>

使用自定义值

Use the text-[<value>] syntax to set the 文本颜色 based on a completely custom value:

<p class="text-[#50d71e] ...">
  <!-- ... -->
</p>

For CSS variables, you can also use the text-(<custom-property>) syntax:

<p class="text-(--my-color) ...">
  <!-- ... -->
</p>

This is just a shorthand for text-[var(<custom-property>)] that adds the var() function for you automatically.

在悬停时应用

Prefix a color utility with a variant like hover:* to only apply the utility in that state:

<p class="...">
  哦，我必须去弄那个
  <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">互联网</a>,
  我在一切上都落后了！
</p>

Learn more about using variants in the variants documentation.

响应式设计

Prefix a color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-blue-600 md:text-green-600 ...">
  <!-- ... -->
</p>

Learn more about using variants in the variants documentation.

自定义您的主题

Use the --color-* theme variables to customize the color utilities in your project:

@theme {
  --color-regal-blue: #243c5a; 
}

Now the text-regal-blue utility can be used in your markup:

<p class="text-regal-blue">
  <!-- ... -->
</p>

Learn more about customizing your theme in the theme documentation.