テキスト入力時のカーソル（キャレット）の色を指定するプロパティです。フォーム要素のブランディングやダークモード対応に便利で、ユーザーの入力体験を向上させます。
caret-color: auto | <color>| caret-pink-500 | caret-color: パレットのpink-500 |
一般形: caret-{color}-{shade}
caret-color: red;カーソルを赤色にする
caret-color: #3b82f6;カーソルを青色にする
caret-color: transparent;カーソルを非表示にする
caret-color: auto;デフォルトの色（通常は黒）
ブランドカラーに合わせたり、ダークモードで見やすくできる。アクセシビリティも考慮して、コントラストの高い色を選ぶ。
input、textarea、contenteditableな要素にのみ効果がある。通常のテキストには効かない。
入力欄の点滅カーソル（キャレット）の色だけを変えるプロパティで、ブランドカラーの入力UIの仕上げに効きます。AIはこのプロパティの存在自体を出さないことが多く、カーソル色が背景に溶けて見えない（ダークUIで黒キャレット）問題の解として覚えておく価値があります。transparentにして独自キャレットを描く上級技もあります。
ダーク背景の検索ボックスでキャレットが見えない問題をcaret-colorで修正して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。