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>;"],
]}
/>
Use utilities like caret-rose-500 and caret-lime-600 to change the color of the text input cursor:
<!-- [!code classes:caret-pink-500] -->
<textarea class="caret-pink-500 ..."></textarea>
<ResponsiveDesign element="textarea" property="caret-color" defaultClass="caret-rose-500" featuredClass="caret-lime-600" />