Tailwind CSS 用戶選擇

用戶選擇

用于控制用戶是否可以在元素中選擇文本的功能類。

禁用文本選擇

使用 ?select-none? 來防止選擇元素及其子元素中的文本。

<div class="select-none ...">
  This text is not selectable
</div>

允許選擇文本

使用 ?select-text? 允許選擇元素及其子元素中的文本。

一鍵選擇所有文本

使用 ?select-all? 在用戶點(diǎn)擊時(shí)自動(dòng)選擇元素中的所有文本。

<div class="select-all ...">
  Click anywhere in this text to select it all
</div>

自動(dòng)

使用 ?select-auto? 來使用默認(rèn)的瀏覽器行為來選擇文本。對(duì)于撤銷其他功能類（如 ?.select-none?）在不同斷點(diǎn)的行為時(shí)很有用。

<div class="select-auto ...">
  This text is selectable
</div>

自定義

變體

默認(rèn)情況下， 針對(duì) user-select 功能類，只生成 responsive 變體。

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

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

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

禁用

如果您不打算在您的項(xiàng)目中使用 user-select 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?userSelect ?屬性設(shè)置為 ?false ?來完全禁用它們：

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