Tailwind CSS - Caret Color

The Tailwind CSS Caret Color utilities allow you to control the color of the text input cursor, often referred to as the caret. This is useful for matching form inputs with your site’s design theme, improving user experience, and enhancing accessibility.

Applying Caret Color

You can change the caret color by using the caret-{color} utility classes. Tailwind provides a comprehensive set of color classes out of the box, derived from its default color palette.

Here’s a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Caret Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 p-8 flex flex-col items-center">

  <div class="w-full max-w-sm">
    <label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-200">Username</label>
    <input type="text" id="username"
           class="mt-1 block w-full px-3 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-md text-sm shadow-sm placeholder-slate-400
                  focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
                  caret-pink-500 dark:caret-violet-400 text-slate-900 dark:text-slate-50"
           placeholder="you@example.com">
  </div>

</body>
</html>

In the example above, caret-pink-500 sets the cursor color in light mode, and dark:caret-violet-400 sets a different color when dark mode is active.

Responsive and State Variants

Like most Tailwind utilities, you can apply caret color classes conditionally using state and responsive variants. For instance, you can change the caret color on focus.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stateful Caret Color</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8 flex justify-center">

<input type="text"
       class="p-2 border border-gray-300 rounded-md
              caret-gray-400
              focus:caret-blue-500
              transition-colors duration-300"
       placeholder="Caret color changes on focus...">

</body>
</html>

In this example, the caret is gray by default (caret-gray-400) but turns blue when the input is focused (focus:caret-blue-500).

Customizing Caret Colors

For real-world projects, you’ll likely want to use your own brand colors. You can customize the available caret colors by extending the caretColor theme object in your tailwind.config.js file.

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      caretColor: {
        'primary': '#ff5733',
        'secondary': '#33ff57',
      },
    },
  },
  plugins: [],
}

After adding this configuration and rebuilding your CSS, you can now use your custom classes like caret-primary and caret-secondary in your HTML.

Best Practices & Accessibility

Contrast is Key: Ensure your chosen caret color has sufficient contrast against the input field’s background color. A low-contrast caret can be difficult for users to see, negatively impacting usability and accessibility.
Consistency: Use a consistent caret color scheme for interactive elements across your application to create a predictable and professional user experience.
Theme Awareness: Use dark mode variants (dark:caret-*) to ensure your forms look great and remain functional in all display modes.

Available Utilities

By default, Tailwind makes the entire default color palette available as caret colors. This includes special keywords and a wide range of hues and shades.