Interactivity

caret-color

用於控制文字輸入游標顏色的通用類別。

ClassStyles
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) */

範例(Examples)

基本範例(Basic example)

使用 caret-rose-500caret-lime-600 等通用類別來變更文字輸入游標的顏色:

聚焦文字區域以查看新的游標顏色

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

使用自訂值(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)

caret-color 通用類別前面加上像 md: 這樣的中斷點變體,讓該通用類別只在中型螢幕尺寸及以上時套用:

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

變體文件中了解更多關於使用變體的資訊。

自訂你的主題(Customizing your theme)

使用 --color-* 主題變數來自訂專案中的 color 通用類別:

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

現在可以在標記中使用 caret-regal-blue 通用類別:

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

主題文件中了解更多關於自訂主題的資訊。

Copyright © 2026 Tailwind Labs Inc.·商標政策(Brand)