快速参考

预览 
text-inherit
Aa
text-current
Aa
text-transparent
Aa
text-black
Aa
text-white
Aa
text-slate-50
Aa
text-slate-100
Aa
text-slate-200
Aa
text-slate-300
Aa
text-slate-400
Aa
text-slate-500
Aa
text-slate-600
Aa
text-slate-700
Aa
text-slate-800
Aa
text-slate-900
Aa
text-slate-950
Aa
text-gray-50
Aa
text-gray-100
Aa
text-gray-200
Aa
text-gray-300
Aa
text-gray-400
Aa
text-gray-500
Aa
text-gray-600
Aa
text-gray-700
Aa
text-gray-800
Aa
text-gray-900
Aa
text-gray-950
Aa
text-zinc-50
Aa
text-zinc-100
Aa
text-zinc-200
Aa
text-锌灰-300
Aa
text-锌灰-400
Aa
text-锌灰-500
Aa
text-锌灰-600
Aa
text-锌灰-700
Aa
text-锌灰-800
Aa
text-锌灰-900
Aa
text-锌灰-950
Aa
text-中性-50
Aa
text-中性-100
Aa
text-中性-200
Aa
text-中性-300
Aa
text-中性-400
Aa
text-中性-500
Aa
text-中性-600
Aa
text-中性-700
Aa
text-中性-800
Aa
text-中性-900
Aa
text-中性-950
Aa
text-石灰-50
Aa
text-石灰-100
Aa
text-石灰-200
Aa
text-石灰-300
Aa
text-石灰-400
Aa
text-石灰-500
Aa
text-石灰-600
Aa
text-石灰-700
Aa
text-石灰-800
Aa
text-石灰-900
Aa
text-石灰-950
Aa
text-红色-50
Aa
text-红色-100
Aa
text-红色-200
Aa
text-红色-300
Aa
text-红色-400
Aa
text-红色-500
Aa
text-红色-600
Aa
text-红色-700
Aa
text-红色-800
Aa
text-红色-900
Aa
text-红色-950
Aa
text-橙色-50
Aa
text-橙色-100
Aa
text-橙色-200
Aa
text-橙色-300
Aa
text-橙色-400
Aa
text-橙色-500
Aa
text-橙色-600
Aa
text-橙色-700
Aa
text-橙色-800
Aa
text-橙色-900
Aa
text-橙色-950
Aa
text-琥珀色-50
Aa
text-琥珀色-100
Aa
text-琥珀色-200
Aa
text-琥珀色-300
Aa
text-琥珀色-400
Aa
text-琥珀色-500
Aa
text-琥珀色-600
Aa
text-琥珀色-700
Aa
text-琥珀色-800
Aa
text-琥珀色-900
Aa
text-琥珀色-950
Aa
text-黄色-50
Aa
text-黄色-100
Aa
text-黄色-200
Aa
text-黄色-300
Aa
text-黄色-400
Aa
text-黄色-500
Aa
text-黄色-600
Aa
text-黄色-700
Aa
text-黄色-800
Aa
text-黄色-900
Aa
text-黄色-950
Aa
text-青柠色-50
Aa
text-青柠色-100
Aa
text-青柠色-200
Aa
text-青柠色-300
Aa
text-青柠色-400
Aa
text-青柠色-500
Aa
text-青柠色-600
Aa
text-青柠色-700
Aa
text-青柠色-800
Aa
text-青柠色-900
Aa
text-青柠色-950
Aa
text-绿色-50
Aa
text-绿色-100
Aa
text-绿色-200
Aa
text-绿色-300
Aa
text-绿色-400
Aa
text-绿色-500
Aa
text-绿色-600
Aa
text-绿色-700
Aa
text-绿色-800
Aa
text-绿色-900
Aa
text-绿色-950
Aa
text-祖母绿-50
Aa
text-祖母绿-100
Aa
text-祖母绿-200
Aa
text-祖母绿-300
Aa
text-祖母绿-400
Aa
text-祖母绿-500
Aa
text-祖母绿-600
Aa
text-祖母绿-700
Aa
text-祖母绿-800
Aa
text-祖母绿-900
Aa
text-祖母绿-950
Aa
text-蓝绿色-50
Aa
text-蓝绿色-100
Aa
text-蓝绿色-200
Aa
text-蓝绿色-300
Aa
text-蓝绿色-400
Aa
text-蓝绿色-500
Aa
text-蓝绿色-600
Aa
text-蓝绿色-700
Aa
text-蓝绿色-800
Aa
text-蓝绿色-900
Aa
text-蓝绿色-950
Aa
text-青色-50
Aa
text-青色-100
Aa
text-青色-200
Aa
text-青色-300
Aa
text-青色-400
Aa
text-青色-500
Aa
text-青色-600
Aa
text-青色-700
Aa
text-青色-800
Aa
text-青色-900
Aa
text-青色-950
Aa
text-天蓝色-50
Aa
text-天蓝色-100
Aa
text-天蓝色-200
Aa
text-sky-300
Aa
text-sky-400
Aa
text-sky-500
Aa
text-sky-600
Aa
text-sky-700
Aa
text-sky-800
Aa
text-sky-900
Aa
text-sky-950
Aa
text-blue-50
Aa
text-blue-100
Aa
text-blue-200
Aa
text-blue-300
Aa
text-blue-400
Aa
text-blue-500
Aa
text-blue-600
Aa
text-blue-700
Aa
text-blue-800
Aa
text-blue-900
Aa
text-blue-950
Aa
text-indigo-50
Aa
text-indigo-100
Aa
text-indigo-200
Aa
text-indigo-300
Aa
text-indigo-400
Aa
text-indigo-500
Aa
text-indigo-600
Aa
text-indigo-700
Aa
text-indigo-800
Aa
text-indigo-900
Aa
text-indigo-950
Aa
text-violet-50
Aa
text-violet-100
Aa
text-violet-200
Aa
text-violet-300
Aa
text-violet-400
Aa
text-violet-500
Aa
text-violet-600
Aa
text-violet-700
Aa
text-violet-800
Aa
text-violet-900
Aa
text-violet-950
Aa
text-purple-50
Aa
text-purple-100
Aa
text-purple-200
Aa
text-purple-300
Aa
text-purple-400
Aa
text-purple-500
Aa
text-purple-600
Aa
text-purple-700
Aa
text-purple-800
Aa
text-purple-900
Aa
text-紫色-950
Aa
text-紫红色-50
Aa
text-紫红色-100
Aa
text-紫红色-200
Aa
text-紫红色-300
Aa
text-紫红色-400
Aa
text-紫红色-500
Aa
text-紫红色-600
Aa
text-紫红色-700
Aa
text-紫红色-800
Aa
text-紫红色-900
Aa
text-紫红色-950
Aa
text-粉红色-50
Aa
text-粉红色-100
Aa
text-粉红色-200
Aa
text-粉红色-300
Aa
text-粉红色-400
Aa
text-粉红色-500
Aa
text-粉红色-600
Aa
text-粉红色-700
Aa
text-粉红色-800
Aa
text-粉红色-900
Aa
text-粉红色-950
Aa
text-玫瑰色-50
Aa
text-玫瑰色-100
Aa
text-玫瑰色-200
Aa
text-玫瑰色-300
Aa
text-玫瑰色-400
Aa
text-玫瑰色-500
Aa
text-玫瑰色-600
Aa
text-玫瑰色-700
Aa
text-玫瑰色-800
Aa
text-玫瑰色-900
Aa
text-玫瑰色-950
Aa

基本用法

设置文本颜色

使用 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 使整个 默认颜色调色板 可用作文本颜色。您可以通过编辑 theme.colorstheme.extend.colors 在您的 tailwind.config.js 文件中 自定义颜色调色板

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

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

主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

如果您需要使用一次性的color值,而该值不适合包含在您的主题中,请使用方括号使用任何任意值动态生成属性。

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

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