テキストの色を指定するプロパティです。色名、16進数（#000000）、RGB、RGBA、HSL、HSLAなど様々な色形式で指定可能です。currentColorキーワードで親要素の色を継承することもできます。
color: <color>| text-gray-900 | color: パレットのgray-900 |
| text-white | color: #fff |
| text-red-500/50 | color: red-500を50%の透明度で |
一般形: text-{color}-{shade}（/nで透明度）
任意値: text-[#b0413e]
v4の標準パレットはOKLCHで定義されている。
サンプルテキスト
.element {
color: #000000;
}color: #3b82f6;このテキストは青色です
16進数カラーコードで青色を指定
color: rgb(59, 130, 246);このテキストはRGB値で青色です
RGB値で同じ青色を指定
color: hsl(217, 91%, 60%);このテキストはHSL値で青色です
HSL値で同じ青色を指定
CSS変数と組み合わせるとテーマ切り替えが簡単になる。
AIが見落としがちなのはcurrentColorの活用です。SVGアイコンやborderにcurrentColorを指定しておけば、colorを変えるだけで一括追従します。またリンク色をcolorで上書きする際、:visited/:hover等の状態まで面倒を見ない生成コードが多いので、状態込みで依頼すると質が上がります。
アイコン・ボーダー・テキストが1箇所のcolor変更で全て追従するボタンを、currentColorで設計して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。