排版
用于控制元素文本颜色的实用程序。
使用 text-{color}
实用程序控制元素的文本颜色。
The quick brown fox jumps over the lazy dog.
<p class="text-blue-600">The quick brown fox...</p>
<p class="text-sky-400">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-sky-400/100">The quick brown fox...</p> <p class="text-sky-400/75">The quick brown fox...</p> <p class="text-sky-400/50">The quick brown fox...</p> <p class="text-sky-400/25">The quick brown fox...</p> <p class="text-sky-400/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>
<p class="text-slate-400 hover:text-sky-400">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.colors
或 theme.extend.colors
在您的 tailwind.config.js
文件中 自定义颜色调色板。
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
},
}
}
}
或者,您可以通过编辑 theme.textColor
或 theme.extend.textColor
在您的 tailwind.config.js
文件中自定义您的文本颜色。
在 主题自定义 文档中了解有关自定义默认主题的更多信息。
如果您需要使用一次性的color
值,而该值不适合包含在您的主题中,请使用方括号使用任何任意值动态生成属性。
<p class="text-[#50d71e]">
<!-- ... -->
</p>
了解有关任意值支持的更多信息,请参阅任意值文档。