color

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like text-blue-600 and text-sky-400 to control the text color of an element:

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

改变透明度(Changing the opacity)

¥Changing the opacity

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

¥Use the color opacity modifier to control the text color opacity of an element:

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

使用自定义值(Using a custom value)

¥Using a custom value

使用 text-[<value>] 语法 根据完全自定义的值设置 text color：

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

对于 CSS 变量，还可以使用 text-(<custom-property>) 语法：

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

这只是简写，用于 text-[var(<custom-property>)] 它会自动为你添加 var() 函数。

悬停时应用(Applying on hover)

¥Applying on hover

在 color 工具前面加上一个变体，例如 hover:*，以便仅在该状态下应用该工具：

<p class="...">Oh I gotta get on that<a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>,I'm late on everything!</p>

请参阅 变体文档 详细了解如何使用变体。

响应式设计(Responsive design)

¥Responsive design

在 color 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具：

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

现在 text-regal-blue 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。