Caret Color

Utilities for controlling the color of the text input cursor.

Show all classes

Use the utilities to change the color of the text input cursor.

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:caret-indigo-500 to only apply the caret-indigo-500 utility on focus.

For a complete list of all available state modifiers, check out the documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:caret-indigo-500 to apply the utility at only medium screen sizes and above.

By default, Tailwind makes the entire available as caret colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

tailwind.config.js

Alternatively, you can customize just your caret colors by editing or theme.extend.caretColor in your tailwind.config.js file.

Learn more about customizing the default theme in the documentation.

Learn more about arbitrary value support in the documentation.