Tailwind CSS - 插入符颜色

Tailwind CSS - 光标颜色

Tailwind CSS 的 光标颜色 工具类允许你控制文本输入光标的颜色，通常称为插入符（caret）。这对于使表单输入与你网站的设计主题保持一致、改善用户体验以及增强无障碍性非常有用。

应用光标颜色

你可以使用 caret-{color} 工具类来更改光标颜色。Tailwind 提供了开箱即用的全面颜色类，它们源自其默认颜色调色板。

这是一个基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Caret Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 p-8 flex flex-col items-center">

  <div class="w-full max-w-sm">
    <label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Username</label>
    <input type="text" id="username"
           class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-md text-sm shadow-sm placeholder-slate-400
                  focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
                  caret-pink-500 dark:caret-violet-400 text-slate-900 dark:text-slate-50"
           placeholder="you@example.com">
  </div>

</body>
</html>

在上面的示例中，caret-pink-500 在亮色模式下设置光标颜色，而 dark:caret-violet-400 则在深色模式激活时设置不同的颜色。

响应式和状态变体

与大多数 Tailwind 工具类一样，你可以使用状态和响应式变体有条件地应用光标颜色类。例如，你可以在聚焦时改变光标颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stateful Caret Color</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8 flex justify-center">

<input type="text"
       class="p-2 border border-gray-300 rounded-md
              caret-gray-400
              focus:caret-blue-500
              transition-colors duration-300"
       placeholder="Caret color changes on focus...">

</body>
</html>

在此示例中，光标默认是灰色（caret-gray-400），但在输入框聚焦时会变为蓝色（focus:caret-blue-500）。

自定义光标颜色

对于实际项目，你可能希望使用自己的品牌颜色。你可以通过扩展 tailwind.config.js 文件中的 caretColor 主题对象来定制可用的光标颜色。

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      caretColor: {
        'primary': '#ff5733',
        'secondary': '#33ff57',
      },
    },
  },
  plugins: [],
}

添加此配置并重新构建你的 CSS 后，你现在就可以在 HTML 中使用 caret-primary 和 caret-secondary 等自定义类了。

最佳实践和无障碍性

**对比度是关键**：确保你选择的光标颜色与输入字段的背景颜色有足够的对比度。低对比度的光标可能难以被用户看到，从而对可用性和无障碍性产生负面影响。
**一致性**：在应用程序中为交互元素使用一致的光标颜色方案，以创建可预测且专业的 UX（用户体验）。
**主题感知**：使用深色模式变体（dark:caret-*）来确保你的表单在所有显示模式下都美观且功能正常。

可用工具类

默认情况下，Tailwind 将整个默认调色板作为光标颜色提供。这包括特殊的关键词以及广泛的色调和阴影。