- 排版
- 文本颜色
排版
文本颜色
用于控制元素文本颜色的实用程序。
基础用法
设置文本颜色
使用 text-* 实用程序来控制元素的文本颜色。
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>
您可以使用 opacity scale 中定义的任何值，或者如果您需要偏离设计令牌，则可以使用任意值。
<p class="text-blue-600/[.06]">The quick brown fox...</p>条件应用
悬停、聚焦和其他状态
Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:text-blue-600 来仅 在 hover应用 text-blue-600.
Try hovering over the text to see the expected behaviour
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>
详细了解, 请参考 Hover, Focus, & Other States 文档.
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:text-green-600 来应用 text-green-600 程序，适用于中等屏幕尺寸及以上。
<p class="text-blue-600 md:text-green-600">
<!-- ... -->
</p>
使用自定义值
定制你的主题
By default, Tailwind makes the entire default color palette available as text colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
},
}
}
}
Alternatively, you can customize just your text colors by editing theme.textColor or theme.extend.textColor in your tailwind.config.js file.
Learn more about customizing the default theme in the theme customization documentation.
任意值
如果您需要使用一次性的 color值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。
<p class="text-[#50d71e]">
<!-- ... -->
</p>
进一步了解，请参考 任意值 文档.
