Cursor

2024-07-03 08:43| 来源: 网络整理| 查看: 265

Interactivity

Cursor

Utilities for controlling the cursor style when hovering over an element.

Quick referenceClassPropertiesPreview cursor-autocursor: auto; cursor-defaultcursor: default; cursor-pointercursor: pointer; cursor-waitcursor: wait; cursor-textcursor: text; cursor-movecursor: move; cursor-helpcursor: help; cursor-not-allowedcursor: not-allowed; cursor-nonecursor: none; cursor-context-menucursor: context-menu; cursor-progresscursor: progress; cursor-cellcursor: cell; cursor-crosshaircursor: crosshair; cursor-vertical-textcursor: vertical-text; cursor-aliascursor: alias; cursor-copycursor: copy; cursor-no-dropcursor: no-drop; cursor-grabcursor: grab; cursor-grabbingcursor: grabbing; cursor-all-scrollcursor: all-scroll; cursor-col-resizecursor: col-resize; cursor-row-resizecursor: row-resize; cursor-n-resizecursor: n-resize; cursor-e-resizecursor: e-resize; cursor-s-resizecursor: s-resize; cursor-w-resizecursor: w-resize; cursor-ne-resizecursor: ne-resize; cursor-nw-resizecursor: nw-resize; cursor-se-resizecursor: se-resize; cursor-sw-resizecursor: sw-resize; cursor-ew-resizecursor: ew-resize; cursor-ns-resizecursor: ns-resize; cursor-nesw-resizecursor: nesw-resize; cursor-nwse-resizecursor: nwse-resize; cursor-zoom-incursor: zoom-in; cursor-zoom-outcursor: zoom-out; Basic usage Setting the cursor style

Use the cursor-* utilities to control which cursor is displayed when hovering over an element.

Hover over each button to see the cursor change

Submit Saving... Confirm Applying conditionally Hover, focus, and other states

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values Customizing your theme

By default, Tailwind includes cursor utilities for many built in options. You can customize these values by editing theme.cursor or theme.extend.cursor in your tailwind.config.js file.

tailwind.config.jsmodule.exports = { theme: { extend: { cursor: { 'fancy': 'url(hand.cur), pointer', } } } }

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off cursor value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

Learn more about arbitrary value support in the arbitrary values documentation.

AppearanceCaret Color

Trademark Policy

Edit this page on GitHubOn this pageQuick referenceBasic usageSetting the cursor styleApplying conditionallyHover, focus, and other statesBreakpoints and media queriesUsing custom valuesCustomizing your themeArbitrary values

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

“This is the survival kit I wish I had when I started building apps.”Derrick Reimer, SavvyCal

【本文地址】

Cursor

Cursor

今日新闻

推荐新闻