Tailwind CSS 光標效果

光標效果

當鼠標懸停在一個元素上時，用于控制光標樣式的功能類。

自動

使用 ?cursor-auto? 允許瀏覽器根據(jù)當前的內(nèi)容改變光標（例如，當鼠標懸停在文本上時，自動變?yōu)?nbsp;?text ?光標）。

<div class="cursor-auto ...">
  Hover over this text
</div>

默認

使用 ?cursor-default? 來改變鼠標光標，使其始終使用依賴于平臺的默認光標（通常是一個箭頭）。

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

指向

使用 ?cursor-pointer? 來改變鼠標光標來表示一個交互式元素（通常是一個指向性的手）。

<div class="cursor-pointer ...">
  Hover me
</div>

等待

使用 ?cursor-wait? 來改變鼠標光標，以表示背景中正在發(fā)生的事情（通常是沙漏或手表）。

<div class="cursor-wait ...">
  Hover me
</div>

文本

使用 ?cursor-text? 來改變鼠標光標，表示可以選擇文本（通常是一個 I 字形）。

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

移動

使用 ?cursor-move? 來改變鼠標光標，表示可以移動的東西。

<div class="cursor-move ...">
  Hover me
</div>

不允許

使用? cursor-not-allowed? 來改變鼠標光標，表示不能與之交互或點擊。

<div class="cursor-not-allowed ...">
  Hover me
</div>

自定義

光標

默認情況下，Tailwind 提供了六個 ?cursor ?實用程序。您可以通過編輯 Tailwind 配置的 ?theme.cursor? 部分來更改、添加或刪除這些內(nèi)容。

  // tailwind.config.js
  module.exports = {
    theme: {
      cursor: {
        auto: 'auto',
        default: 'default',
        pointer: 'pointer',
       wait: 'wait',
        text: 'text',
       move: 'move',
        'not-allowed': 'not-allowed',
       crosshair: 'crosshair',
       'zoom-in': 'zoom-in',
      }
    }
  }

變體

默認情況下， 針對 cursor 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?cursor ?屬性來控制為 cursor 功能生成哪些變體。

例如，這個配置也將生成 hover and focus 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       cursor: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的項目中使用 cursor 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?cursor ?屬性設置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     cursor: false,
    }
  }