Tailwind CSS - 用户选择

现代 Tailwind CSS：控制用户选择行为

CSS 中的 user-select 属性控制用户是否可以在元素内选择文本。Tailwind 提供了一套直观的 select-* 工具类来管理这种行为，这对于打造精致且有意的用户体验（UX）至关重要。

用户选择工具类

Tailwind 的工具类涵盖了文本选择的所有常见用例。

类名（Class）	CSS 属性（CSS Property）	典型用例（Typical Use Case）
select-none	user-select: none;	按钮、交互式 UI、图标等，避免文本选择分散注意力。
select-text	user-select: text;	标准段落、文章以及任何应可复制的内容。
select-all	user-select: all;	代码块、API 密钥或预格式化文本，方便一键复制。
select-auto	user-select: auto;	让浏览器根据上下文决定（默认行为）。

实用示例

要遵循这些示例，请确保你已设置好一个现代的 Tailwind CSS 项目。有关说明，请参阅其他章节中的设置指南。

示例 1：禁用自定义按钮上的选择

当你点击并拖动按钮时，你不会希望意外选择其文本。select-none 阻止了这种情况，使自定义样式的 <div> 或 <a> 标签的行为更像原生按钮。

<link href="/dist/output.css" rel="stylesheet">

<body class="p-8 flex flex-col items-center gap-4">
  <!-- 尝试选择此按钮中的文本。你无法选择。 -->
  <button
    class="
      bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg
      shadow-lg hover:bg-indigo-700 active:bg-indigo-800
      focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75
      select-none
    ">
    Click Me
  </button>

  <!-- 此段落中的文本默认可选择。 -->
  <p class="select-text max-w-sm text-center">
    Regular text like this should be selectable so users can copy it, share it, or use it with assistive technologies.
  </p>
</body>

示例 2：代码块的一键选择

对于代码片段、安装命令或 API 密钥，select-all 是一个出色的用户体验增强功能。在元素内单击一下即可选择全部内容，使用户能够轻松复制。

<link href="/dist/output.css" rel="stylesheet">

<body class="p-8 bg-slate-900">
  <div class="max-w-md mx-auto">
    <label class="text-slate-400 font-medium">Click the command below to copy it:</label>

    <!-- One click selects the whole command -->
    <pre
      class="
        bg-slate-800 text-green-400 font-mono text-sm
        p-4 mt-2 rounded-md select-all cursor-pointer
      ">
      <code>npm install -D tailwindcss</code>
    </pre>
  </div>
</body>

可访问性（Accessibility）和用户体验（UX）注意事项

谨慎使用 select-none。 尽管它非常适用于非文本 UI 元素，但禁用内容上的文本选择可能会导致严重的可访问性问题。用户可能出于各种原因依赖文本选择：

• 复制和粘贴：最明显的用例。
• 辅助技术：一些屏幕阅读器和工具使用文本选择来阅读或定义部分文本。
• 翻译：浏览器翻译扩展通常对选定的文本进行操作。
• 可读性：有些用户在阅读时会选择文本以帮助他们集中注意力。

作为一般规则，只将 select-none 应用于那些明确是交互式控件的元素，而不是信息性内容。