1. 交互性
  2. caret-color

交互性

caret-color

用于控制文本输入光标颜色的实用工具。

类名样式
caret-inherit
caret-color: inherit;
caret-current
caret-color: currentColor;
caret-transparent
caret-color: transparent;
caret-black
caret-color: var(--color-black); /* #000 */
caret-white
caret-color: var(--color-white); /* #fff */
caret-red-50
caret-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
caret-red-100
caret-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
caret-red-200
caret-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
caret-red-300
caret-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
caret-red-400
caret-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

示例

基本示例

使用类似 caret-rose-500caret-lime-600 这样的工具类来更改文本输入光标的颜色

聚焦文本区域以查看新的光标颜色

<textarea class="caret-pink-500 ..."></textarea>

使用自定义值

使用 caret-[<value>] 语法 来设置光标颜色基于完全自定义的值

<textarea class="caret-[#50d71e] ..."></textarea>

对于 CSS 变量,您也可以使用 caret-(<custom-property>) 语法

<textarea class="caret-(--my-caret-color) ..."></textarea>

这只是 caret-[var(<custom-property>)] 的简写形式,它会自动为您添加 var() 函数。

响应式设计

前缀一个 caret-color 工具类 与断点变体(如 md:)一起使用,以仅在中等尺寸及以上的屏幕尺寸上应用该工具类 尺寸及以上的屏幕尺寸上应用该工具类

<textarea class="caret-rose-500 md:caret-lime-600 ..."></textarea>

了解更多关于在变体文档中使用变体的信息。

自定义您的主题

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

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

现在 caret-regal-blue 工具类可以在您的标记中使用

<textarea class="caret-regal-blue"></textarea>

了解更多关于在主题文档中自定义您的主题的信息。 主题文档.

版权所有 © 2025 Tailwind Labs Inc.·商标政策