Cursor

    Auto

    Use to allow the browser to change the cursor based on the current content (e.g. automatically change to text cursor when hovering over text).

    Default

    Use .cursor-default to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).

    Cursor - 图2

    1. <div class="cursor-default ...">
    2.   Hover over this text
    3. </div>

    Use .cursor-pointer to change the mouse cursor to indicate an interactive element (usually a pointing hand).

    1.   Hover me
    2. </div>

    Wait

    Cursor - 图4

    Text

    Use .cursor-text to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).

    1. <div class="cursor-text ...">
    2.   Hover me
    3. </div>

    Use .cursor-move to change the mouse cursor to indicate something that can be moved.

    Cursor - 图6

    1. <div class="cursor-move ...">
    3. </div>

    Not Allowed

    Use .cursor-not-allowed to change the mouse cursor to indicate something can not be interacted with or clicked.

    Customizing

    By default Tailwind provides six cursor utilities. You change, add, or remove these by editing the theme.cursor section of your Tailwind config.

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     theme: {
    4.       cursor: {
    5.         auto: 'auto',
    6.         default: 'default',
    7.         pointer: 'pointer',
    8.         text: 'text',
    9. -       move: 'move',
    10.         'not-allowed': 'not-allowed',
    11. +       crosshair: 'crosshair',
    13.       }
    14.     }
    15.   }

    By default, only responsive variants are generated for cursor utilities.

    You can control which variants are generated for the cursor utilities by modifying the cursor property in the variants section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     variants: {
    4.       // ...
    5. -     cursor: ['responsive'],
    6. +     cursor: ['responsive', 'hover', 'focus'],
    7.     }

    If you don’t plan to use the cursor utilities in your project, you can disable them entirely by setting the cursor property to false in the section of your config file:

    ← Appearance