cursor

cursor

Sets cursor via --cursor. E.g. pointer, grab.

CSS Rules

.cursor {
  cursor: var(--cursor);
}

Usage

<element class="cursor" style="--cursor: /* value */;" />

Responsive

Prefix .cursor utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor" style="--md-cursor: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor:hover" style="--cursor-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor::before" style="--cursor-before: /* value */;" />

<element class="content-after cursor::after" style="--cursor-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="cursor=value" />

<!-- Output -->
<element class="cursor" style="--cursor: value;" />

cursor-auto

Lets the browser decide the cursor for the current context.

CSS Rules

.cursor-auto {
  cursor: auto;
}

Usage

<element class="cursor-auto" />

Responsive

Prefix .cursor-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-auto::before" />

<element class="content-after cursor-auto::after" />

cursor-default

Sets cursor: default. The standard arrow cursor.

CSS Rules

.cursor-default {
  cursor: default;
}

Usage

<element class="cursor-default" />

Responsive

Prefix .cursor-default utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-default" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-default:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-default:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-default::before" />

<element class="content-after cursor-default::after" />

cursor-pointer

Sets cursor: pointer. The hand cursor for clickable elements.

CSS Rules

.cursor-pointer {
  cursor: pointer;
}

Usage

<element class="cursor-pointer" />

Responsive

Prefix .cursor-pointer utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-pointer" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-pointer:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-pointer:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-pointer::before" />

<element class="content-after cursor-pointer::after" />

cursor-wait

Sets cursor: wait. Indicates a loading or busy state.

CSS Rules

.cursor-wait {
  cursor: wait;
}

Usage

<element class="cursor-wait" />

Responsive

Prefix .cursor-wait utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-wait" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-wait:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-wait:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-wait::before" />

<element class="content-after cursor-wait::after" />

cursor-text

Sets cursor: text. Indicates editable or selectable text.

CSS Rules

.cursor-text {
  cursor: text;
}

Usage

<element class="cursor-text" />

Responsive

Prefix .cursor-text utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-text" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-text:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-text:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-text::before" />

<element class="content-after cursor-text::after" />

cursor-move

Indicates an element can be moved.

CSS Rules

.cursor-move {
  cursor: move;
}

Usage

<element class="cursor-move" />

Responsive

Prefix .cursor-move utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-move" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-move:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-move:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-move::before" />

<element class="content-after cursor-move::after" />

cursor-help

Indicates contextual help is available.

CSS Rules

.cursor-help {
  cursor: help;
}

Usage

<element class="cursor-help" />

Responsive

Prefix .cursor-help utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-help" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-help:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-help:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-help::before" />

<element class="content-after cursor-help::after" />

cursor-not-allowed

Sets cursor: not-allowed. Communicates a disabled or forbidden action.

CSS Rules

.cursor-not-allowed {
  cursor: not-allowed;
}

Usage

<element class="cursor-not-allowed" />

Responsive

Prefix .cursor-not-allowed utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-not-allowed" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-not-allowed:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-not-allowed:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-not-allowed::before" />

<element class="content-after cursor-not-allowed::after" />

cursor-none

Sets cursor: none. Hides the cursor entirely.

CSS Rules

.cursor-none {
  cursor: none;
}

Usage

<element class="cursor-none" />

Responsive

Prefix .cursor-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-none::before" />

<element class="content-after cursor-none::after" />

cursor-context-menu

Indicates a context menu can be opened.

CSS Rules

.cursor-context-menu {
  cursor: context-menu;
}

Usage

<element class="cursor-context-menu" />

Responsive

Prefix .cursor-context-menu utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-context-menu" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-context-menu:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-context-menu:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-context-menu::before" />

<element class="content-after cursor-context-menu::after" />

cursor-progress

Indicates background work with a progress state.

CSS Rules

.cursor-progress {
  cursor: progress;
}

Usage

<element class="cursor-progress" />

Responsive

Prefix .cursor-progress utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-progress" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-progress:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-progress:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-progress::before" />

<element class="content-after cursor-progress::after" />

cursor-cell

Indicates table cell selection.

CSS Rules

.cursor-cell {
  cursor: cell;
}

Usage

<element class="cursor-cell" />

Responsive

Prefix .cursor-cell utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-cell" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-cell:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-cell:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-cell::before" />

<element class="content-after cursor-cell::after" />

cursor-crosshair

Precise selection cursor, common for canvases or pickers.

CSS Rules

.cursor-crosshair {
  cursor: crosshair;
}

Usage

<element class="cursor-crosshair" />

Responsive

Prefix .cursor-crosshair utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-crosshair" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-crosshair:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-crosshair:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-crosshair::before" />

<element class="content-after cursor-crosshair::after" />

cursor-vertical-text

Indicates vertical text selection.

CSS Rules

.cursor-vertical-text {
  cursor: vertical-text;
}

Usage

<element class="cursor-vertical-text" />

Responsive

Prefix .cursor-vertical-text utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-vertical-text" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-vertical-text:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-vertical-text:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-vertical-text::before" />

<element class="content-after cursor-vertical-text::after" />

cursor-alias

Indicates a shortcut or alias will be created.

CSS Rules

.cursor-alias {
  cursor: alias;
}

Usage

<element class="cursor-alias" />

Responsive

Prefix .cursor-alias utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-alias" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-alias:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-alias:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-alias::before" />

<element class="content-after cursor-alias::after" />

cursor-copy

Indicates a copy action.

CSS Rules

.cursor-copy {
  cursor: copy;
}

Usage

<element class="cursor-copy" />

Responsive

Prefix .cursor-copy utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-copy" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-copy:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-copy:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-copy::before" />

<element class="content-after cursor-copy::after" />

cursor-no-drop

Indicates dropping is not allowed.

CSS Rules

.cursor-no-drop {
  cursor: no-drop;
}

Usage

<element class="cursor-no-drop" />

Responsive

Prefix .cursor-no-drop utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-no-drop" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-no-drop:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-no-drop:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-no-drop::before" />

<element class="content-after cursor-no-drop::after" />

cursor-grab

Sets cursor: grab. Indicates the element is draggable.

CSS Rules

.cursor-grab {
  cursor: grab;
}

Usage

<element class="cursor-grab" />

Responsive

Prefix .cursor-grab utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-grab" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-grab:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-grab:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-grab::before" />

<element class="content-after cursor-grab::after" />

cursor-grabbing

Indicates active dragging.

CSS Rules

.cursor-grabbing {
  cursor: grabbing;
}

Usage

<element class="cursor-grabbing" />

Responsive

Prefix .cursor-grabbing utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-grabbing" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-grabbing:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-grabbing:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-grabbing::before" />

<element class="content-after cursor-grabbing::after" />

cursor-all-scroll

Indicates scrolling in any direction.

CSS Rules

.cursor-all-scroll {
  cursor: all-scroll;
}

Usage

<element class="cursor-all-scroll" />

Responsive

Prefix .cursor-all-scroll utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-all-scroll" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-all-scroll:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-all-scroll:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-all-scroll::before" />

<element class="content-after cursor-all-scroll::after" />

cursor-col-resize

Indicates column resizing.

CSS Rules

.cursor-col-resize {
  cursor: col-resize;
}

Usage

<element class="cursor-col-resize" />

Responsive

Prefix .cursor-col-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-col-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-col-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-col-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-col-resize::before" />

<element class="content-after cursor-col-resize::after" />

cursor-row-resize

Indicates row resizing.

CSS Rules

.cursor-row-resize {
  cursor: row-resize;
}

Usage

<element class="cursor-row-resize" />

Responsive

Prefix .cursor-row-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-row-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-row-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-row-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-row-resize::before" />

<element class="content-after cursor-row-resize::after" />

cursor-n-resize

Indicates resizing toward the top edge.

CSS Rules

.cursor-n-resize {
  cursor: n-resize;
}

Usage

<element class="cursor-n-resize" />

Responsive

Prefix .cursor-n-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-n-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-n-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-n-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-n-resize::before" />

<element class="content-after cursor-n-resize::after" />

cursor-e-resize

Indicates resizing toward the right edge.

CSS Rules

.cursor-e-resize {
  cursor: e-resize;
}

Usage

<element class="cursor-e-resize" />

Responsive

Prefix .cursor-e-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-e-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-e-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-e-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-e-resize::before" />

<element class="content-after cursor-e-resize::after" />

cursor-s-resize

Indicates resizing toward the bottom edge.

CSS Rules

.cursor-s-resize {
  cursor: s-resize;
}

Usage

<element class="cursor-s-resize" />

Responsive

Prefix .cursor-s-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-s-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-s-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-s-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-s-resize::before" />

<element class="content-after cursor-s-resize::after" />

cursor-w-resize

Indicates resizing toward the left edge.

CSS Rules

.cursor-w-resize {
  cursor: w-resize;
}

Usage

<element class="cursor-w-resize" />

Responsive

Prefix .cursor-w-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-w-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-w-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-w-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-w-resize::before" />

<element class="content-after cursor-w-resize::after" />

cursor-ne-resize

Indicates diagonal resizing toward the top-right corner.

CSS Rules

.cursor-ne-resize {
  cursor: ne-resize;
}

Usage

<element class="cursor-ne-resize" />

Responsive

Prefix .cursor-ne-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-ne-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-ne-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-ne-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-ne-resize::before" />

<element class="content-after cursor-ne-resize::after" />

cursor-nw-resize

Indicates diagonal resizing toward the top-left corner.

CSS Rules

.cursor-nw-resize {
  cursor: nw-resize;
}

Usage

<element class="cursor-nw-resize" />

Responsive

Prefix .cursor-nw-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-nw-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-nw-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-nw-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-nw-resize::before" />

<element class="content-after cursor-nw-resize::after" />

cursor-se-resize

Indicates diagonal resizing toward the bottom-right corner.

CSS Rules

.cursor-se-resize {
  cursor: se-resize;
}

Usage

<element class="cursor-se-resize" />

Responsive

Prefix .cursor-se-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-se-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-se-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-se-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-se-resize::before" />

<element class="content-after cursor-se-resize::after" />

cursor-sw-resize

Indicates diagonal resizing toward the bottom-left corner.

CSS Rules

.cursor-sw-resize {
  cursor: sw-resize;
}

Usage

<element class="cursor-sw-resize" />

Responsive

Prefix .cursor-sw-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-sw-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-sw-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-sw-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-sw-resize::before" />

<element class="content-after cursor-sw-resize::after" />

cursor-ew-resize

Indicates horizontal resizing along the left/right axis.

CSS Rules

.cursor-ew-resize {
  cursor: ew-resize;
}

Usage

<element class="cursor-ew-resize" />

Responsive

Prefix .cursor-ew-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-ew-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-ew-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-ew-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-ew-resize::before" />

<element class="content-after cursor-ew-resize::after" />

cursor-ns-resize

Indicates vertical resizing along the top/bottom axis.

CSS Rules

.cursor-ns-resize {
  cursor: ns-resize;
}

Usage

<element class="cursor-ns-resize" />

Responsive

Prefix .cursor-ns-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-ns-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-ns-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-ns-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-ns-resize::before" />

<element class="content-after cursor-ns-resize::after" />

cursor-nesw-resize

Indicates diagonal resizing along the northeast/southwest axis.

CSS Rules

.cursor-nesw-resize {
  cursor: nesw-resize;
}

Usage

<element class="cursor-nesw-resize" />

Responsive

Prefix .cursor-nesw-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-nesw-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-nesw-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-nesw-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-nesw-resize::before" />

<element class="content-after cursor-nesw-resize::after" />

cursor-nwse-resize

Indicates diagonal resizing along the northwest/southeast axis.

CSS Rules

.cursor-nwse-resize {
  cursor: nwse-resize;
}

Usage

<element class="cursor-nwse-resize" />

Responsive

Prefix .cursor-nwse-resize utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-nwse-resize" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-nwse-resize:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-nwse-resize:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-nwse-resize::before" />

<element class="content-after cursor-nwse-resize::after" />

cursor-zoom-in

Indicates zooming in.

CSS Rules

.cursor-zoom-in {
  cursor: zoom-in;
}

Usage

<element class="cursor-zoom-in" />

Responsive

Prefix .cursor-zoom-in utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-zoom-in" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-zoom-in:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-zoom-in:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-zoom-in::before" />

<element class="content-after cursor-zoom-in::after" />

cursor-zoom-out

Indicates zooming out.

CSS Rules

.cursor-zoom-out {
  cursor: zoom-out;
}

Usage

<element class="cursor-zoom-out" />

Responsive

Prefix .cursor-zoom-out utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:cursor-zoom-out" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="cursor-zoom-out:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="cursor-zoom-out:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before cursor-zoom-out::before" />

<element class="content-after cursor-zoom-out::after" />