# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/caret-color.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourThemeColors } from "@/components/content.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { UsingACustomValue } from "@/components/content.tsx";
import colors from "./utils/colors";

export const title = "caret-color";
export const description = "Utilities for controlling the color of the text input cursor.";

<ApiTable
  rows={[
    ["caret-inherit", "caret-color: inherit;"],
    ["caret-current", "caret-color: currentColor;"],
    ["caret-transparent", "caret-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `caret-${name}`,
      `caret-color: var(--color-${name}); /* ${value} */`,
    ]),
    ["caret-<custom-property>", "caret-color: var(<custom-property>);"],
    ["caret-[<value>]", "caret-color: <value>;"],
  ]}
/>
## Examples

### Basic example

Use utilities like `caret-rose-500` and `caret-lime-600` to change the color of the text input cursor:

<Figure hint="Focus the textarea to see the new caret color">

<Example>
  {
    <div className="flex w-full items-center justify-center">
      <textarea
        className="w-80 rounded-md p-2 text-sm caret-pink-500 ring-1 ring-gray-900/10 focus:ring-2 focus:ring-pink-500 focus:outline-none dark:bg-gray-950/25 dark:ring-1 dark:ring-white/5 dark:focus:bg-gray-950/10 dark:focus:ring-2 dark:focus:ring-pink-500"
        rows="2"
      />
    </div>
  }
</Example>

```html
<!-- [!code classes:caret-pink-500] -->
<textarea class="caret-pink-500 ..."></textarea>
```

</Figure>

### Using a custom value

<UsingACustomValue element="textarea" utility="caret" value="#50d71e" name="caret color" variable="caret-color" />

### Responsive design

<ResponsiveDesign
  element="textarea"
  property="caret-color"
  defaultClass="caret-rose-500"
  featuredClass="caret-lime-600"
/>

## Customizing your theme

<CustomizingYourThemeColors element="textarea" utility="caret" />