Tailwind CSS - 文本颜色

Tailwind CSS 中文本颜色的现代指南

Tailwind CSS 提供了一个广泛、精选的调色板，可以通过实用工具类来设置文本颜色。这些工具使得维护一致的配色方案和构建美观、可主题化的用户界面变得轻而易举。

理解文本颜色实用工具

文本颜色类遵循一个简单、可预测的模式：text-{color}-{shade}。

text：实用工具前缀。
{color}：颜色名称（例如，slate、blue、red）。
{shade}：一个从 50（最浅）到 950（最深）的数字，定义颜色的深浅度。

Tailwind 还包括一些特殊用途的颜色类：

类名	CSS 属性	描述
text-inherit	color: inherit;	将文本颜色设置为其直接父元素的颜色。
text-current	color: currentColor;	将文本颜色设置为当前的 CSS `color` 属性值。对于 SVG 很有用。
text-transparent	color: transparent;	使文本颜色透明。
text-black / text-white	color: rgb(0 0 0); / rgb(255 255 255);	应用纯黑色或纯白色。

实际应用：构建通知组件

与其仅仅给纯文本着色，不如使用文本颜色实用工具来构建一个真实的 UI 组件。此示例展示了一个通知卡片，其中使用不同的颜色来传达意义并创建视觉层次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Color Component</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen p-4">

    <!-- Notification Component -->
    <div class="max-w-md w-full bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
        <h3 class="font-bold text-lg text-slate-800 dark:text-slate-100">
            New Message Received
        </h3>
        <p class="mt-2 text-slate-600 dark:text-slate-400">
            You have a new message from a team member regarding the Q4 project proposal. Please review it at your earliest convenience.
        </p>
        <div class="mt-4">
            <a href="#" class="font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                View Message &rarr;
            </a>
        </div>
    </div>

</body>
</html>

高级用法：悬停、焦点和深色模式

当你将实用工具与 hover:、focus: 和 dark: 等状态变体结合使用时，Tailwind 的强大功能便会显现。这使你能够轻松创建交互式和主题感知的组件。

示例：交互式按钮

此示例演示了一个按钮，其文本颜色在悬停时和深色模式下会发生变化。dark: 前缀仅在用户系统（或手动切换）设置为深色主题时应用样式。

<!DOCTYPE html>
<!-- Add 'dark' class here to manually test dark mode -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Text Color</title>
    <link href="/dist/output.css" rel="stylesheet">
    <script>
        // Optional: script to toggle dark mode
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>
</head>
<body class="bg-white dark:bg-black flex items-center justify-center min-h-screen">

    <button class="px-6 py-3 rounded-lg font-semibold
                   bg-violet-100 text-violet-700
                   hover:bg-violet-200 hover:text-violet-900
                   dark:bg-violet-900/50 dark:text-violet-300
                   dark:hover:bg-violet-900 dark:hover:text-violet-100
                   focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-black">
        Click Me
    </button>

</body>
</html>

最佳实践：可访问性和对比度

选择文本颜色时，务必确保与背景色有足够的对比度。Web 内容可访问性指南 (WCAG) 建议普通文本的对比度至少为 4.5:1。使用在线对比度检查器来验证你的颜色组合。例如，白色背景上的 text-slate-500 是可访问的，但 text-slate-300 则不是。