Text Color 文本颜色

控制元素文本颜色的实用程序。

Class	Properties	Preview

基本用法

设置文本颜色

使用 text-{color} 工具控制元素的文本颜色。

The quick brown fox jumps over the lazy dog.

<p class="text-blue-600">The quick brown fox...</p>

更改不透明度

使用颜色不透明度修改器控制元素文本颜色的不透明度。

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-blue-600/100">The quick brown fox...</p>
<p class="text-blue-600/75">The quick brown fox...</p>
<p class="text-blue-600/50">The quick brown fox...</p>
<p class="text-blue-600/25">The quick brown fox...</p>
<p class="text-blue-600/0">The quick brown fox...</p>

您可以使用您的不透明度比例尺中定义的任何值，或者如果需要偏离设计令牌，也可以使用任意值。

<p class="text-blue-600/[.06]">The quick brown fox...</p>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:text-blue-600 只在悬停时应用 text-blue-600 实用程序。

👆 尝试将鼠标悬停在文本上，以查看预期的行为

The quick brown fox jumps over the lazy dog.

<p class="text-slate-500 hover:text-blue-600">The quick brown fox...</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:text-green-600 仅在中等屏幕尺寸及以上应用 text-green-600 实用程序。

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

使用自定义值

定制您的主题

默认情况下，Tailwind 将整个默认颜色调色板作为文本颜色可用。您可以在 tailwind.config.js 文件中通过编辑 theme.colors 或 theme.extend.colors 来自定义您的颜色调色板。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {						
        'regal-blue': '#243c5a',	
      },							
    }
  }
}

或者，您可以通过编辑 tailwind.config.js 文件中的 theme.textColor 或 theme.extend.textColor 来自定义文本颜色。

有关自定义默认主题的更多信息，请参阅主题自定义文档。

任意值

如果您需要使用一个与主题无关的 color 值，可以使用方括号来根据任意值动态生成属性。

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

有关任意值支持的更多信息，请参阅任意值文档。