Tailwind CSS Caret Color Cheatsheet
Complete reference for all Tailwind v4 caret-color utilities.
Click each input to see the caret color in action. Click the card to copy the class.
Quick Navigation
Special Values
Special caret color values for inheriting, matching text color, or hiding the caret.
Basic Colors
Black and white caret colors for simple styling needs.
Color Palette
Caret colors from Tailwind's default color palette at the 500 shade.
Gray Scale
Neutral and gray caret colors for subtle styling.
Common Use Cases
Brand-Colored Inputs
<input
type="text"
class="caret-blue-500 border border-gray-300
focus:border-blue-500 rounded px-3 py-2"
placeholder="Enter your email"
/>Dark Mode Inputs
<input
type="text"
class="caret-white bg-slate-800
text-white border border-slate-600
rounded px-3 py-2"
placeholder="Dark mode input"
/>Match Text Color
<input
type="text"
class="caret-current text-emerald-600
border border-emerald-300
rounded px-3 py-2"
placeholder="Caret matches text"
/>Form Validation
{/* Success state */}
<input class="caret-green-500
border-green-500" />
{/* Error state */}
<input class="caret-red-500
border-red-500" />Textarea Styling
<textarea
class="caret-purple-500 w-full h-32
border border-gray-300 rounded-lg
p-3 focus:border-purple-500"
placeholder="Write something..."
></textarea>Content Editable
<div
contenteditable="true"
class="caret-pink-500 p-4 border
border-dashed border-gray-300
rounded-lg min-h-[100px]"
>
Edit this content...
</div>Arbitrary Caret Colors
You can use any custom color with Tailwind's arbitrary value syntax:
<input class="caret-[#ff6b6b]" />
<input class="caret-[rgb(255,107,107)]" />
<input class="caret-[hsl(0,100%,71%)]" />Arbitrary values let you use any valid CSS color format including hex, rgb, hsl, and CSS color names.
Frequently Asked Questions
What is caret-color in Tailwind CSS?
The caret-color utility in Tailwind CSS controls the color of the text insertion cursor (caret) in input fields, textareas, and other editable elements. Classes like caret-red-500 or caret-blue-500 change the cursor color to match your design.
How do I change the caret color in Tailwind CSS?
Add a caret color class to your input element, such as <input class="caret-blue-500">. Tailwind provides caret colors for all palette colors (caret-red-500, caret-green-500, etc.) plus special values like caret-inherit, caret-current, and caret-transparent.
What is the difference between caret-current and caret-inherit?
caret-current sets the caret color to match the element's current text color (currentColor), while caret-inherit inherits the caret color from the parent element. Use caret-current when you want the caret to always match the text color.
Can I make the caret invisible in Tailwind?
Yes, use the caret-transparent class to make the text cursor invisible. This is useful for custom input implementations or when you want to hide the default caret and show a custom cursor instead.
Does caret color work on all input types?
Caret color works on text-based input types (text, email, password, search, url, tel, number) and textareas. It also works on contenteditable elements. It does not affect checkboxes, radio buttons, or select dropdowns.
Can I use arbitrary caret colors in Tailwind?
Yes! Use arbitrary values with the caret utility: caret-[#ff6b6b] or caret-[rgb(255,107,107)]. This lets you use any custom color for the caret.
Quick Reference Table
| Class | CSS | Use For |
|---|---|---|
caret-inherit | caret-color: inherit; | Inherit parent's caret color |
caret-current | caret-color: currentColor; | Match current text color |
caret-transparent | caret-color: transparent; | Hide caret completely |
caret-black | caret-color: #000; | Light backgrounds |
caret-white | caret-color: #fff; | Dark backgrounds |
caret-blue-500 | caret-color: #3b82f6; | Brand-colored inputs |
caret-red-500 | caret-color: #ef4444; | Error state inputs |
caret-green-500 | caret-color: #22c55e; | Success state inputs |
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow