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(0.971 0.013 17.38) */
caret-red-100
caret-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
caret-red-200
caret-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
caret-red-300
caret-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
caret-red-400
caret-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 caret-rose-500caret-lime-600 等工具更改文本输入光标的颜色:

¥Use utilities like caret-rose-500 and caret-lime-600 to change the color of the text input cursor:

聚焦文本区域以查看新的插入符号颜色

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

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

¥Using a custom value

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

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

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

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

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

响应式设计(Responsive design)

¥Responsive design

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

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

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

自定义主题(Customizing your theme)

¥Customizing your theme

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

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

现在 caret-regal-blue 工具可用于你的标记:

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

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

TailwindCSS v4.0 中文网 - 粤ICP备13048890号