Tailwind CSS - 交互性
Tailwind CSS 交互性 涵盖了丰富的预定义类，可用于为元素添加交互功能，例如悬停效果、焦点状态、过渡效果等。
Tailwind CSS 交互性参考
以下主题介绍如何将各种交互样式应用于元素，包括悬停和焦点效果、过渡效果、动画等。
| 主题 | 描述 | 示例 |
|---|---|---|
| Tailwind CSS - 强调色 | 强调色定义按钮和链接等元素的高亮颜色 | |
| Tailwind CSS - 外观 | 外观控制元素的外观，包括悬停、聚焦和活动状态。 | |
| Tailwind CSS - 光标 | 光标设置在元素上显示的光标类型，例如指针、文本和更多。 | |
| Tailwind CSS - 插入符号颜色 | 插入符号颜色设置输入字段中文本光标的颜色。 | |
| Tailwind CSS - 指针事件 | 指针事件控制在元素上启用或禁用哪些鼠标交互。 | |
| Tailwind CSS - 调整大小 | 调整大小控制是否用户如何调整元素大小。 | |
| Tailwind CSS - 滚动行为 | 滚动行为控制元素内滚动的平滑度和样式。 | |
| Tailwind CSS - 滚动边距 | 滚动边距设置滚动时元素周围的空间。 | |
| Tailwind CSS - 滚动内边距 | 滚动内边距设置元素内部的空间，为滚动内容创建缓冲区。 | |
| Tailwind CSS - 滚动捕捉对齐 | 滚动捕捉对齐控制元素在滚动时如何自动对齐。 | |
| Tailwind CSS - 滚动捕捉停止 | 滚动捕捉停止决定元素是否应该停止以及停止在何处滚动时停止。 | |
| Tailwind CSS - 滚动捕捉类型 | 敬请滚动捕捉类型定义滚动如何捕捉到特定点或最近的项目。 | |
| Tailwind CSS - 触摸操作 | 触摸操作控制如何处理触摸交互，例如滚动、缩放等。 | |
| Tailwind CSS - 用户选择 | 用户选择控制用户是否可以选择或高亮显示元素中的文本。 | |
| Tailwind CSS - 即将更改 | 即将更改会告知浏览器元素的哪些属性可能会更改以提高性能。 |
Tailwind CSS 交互示例
在下面的示例中，我们使用 Tailwind CSS 类来设置单选按钮、范围输入、光标类型的样式，并控制元素如何响应鼠标操作。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Interactivity
</h2>
<h3 class="underline font-bold mb-2">
Accent Color Classes
</h3>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label>Default Radio Button</label>
<label class="flex items-center space-x-2">
<input type="radio" name="option">
<span>Default</span>
</label>
</div>
<div>
<label>Accent Radio Button</label>
<label class="flex items-center space-x-2">
<input type="radio" name="option" class="accent-green-500">
<span>Green Accent</span>
</label>
</div>
</div>
<h3 class="underline font-bold mb-2">
Appearance Classes on Range Inputs
</h3>
<div class="grid grid-cols-2 gap-4 mb-6">
<div>
<h4 class="font-bold mb-1">Auto Appearance</h4>
<input type="range" class="appearance-auto">
</div>
<div>
<h4 class="font-bold mb-1">Custom Appearance</h4>
<input type="range" class="appearance-none bg-gray-300 accent-teal-500">
</div>
</div>
<h3 class="underline font-bold mb-2">
Cursor Classes
</h3>
<div class="grid grid-cols-5 gap-2 mb-6">
<div class="p-2 border border-teal-500 cursor-none">
<p>None</p>
</div>
<div class="p-2 border border-pink-400 cursor-pointer">
<p>Pointer</p>
</div>
<div class="p-2 border border-teal-500 cursor-text">
<p>Text</p>
</div>
<div class="p-2 border border-pink-400 cursor-move">
<p>Move</p>
</div>
<div class="p-2 border border-teal-500 cursor-wait">
<p>Wait</p>
</div>
</div>
<h3 class="underline font-bold mb-2">
Pointer Events Classes
</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<h4 class="font-semibold underline">pointer-events-none</h4>
<p class="bg-teal-100 p-2 pointer-events-none">
Ignores mouse actions.
</p>
</div>
<div>
<h4 class="font-semibold underline">pointer-events-auto</h4>
<p class="bg-teal-100 p-2 pointer-events-auto">
Responds to mouse actions.
</p>
</div>
</div>
</body>
</html>
示例
在此示例中，我们展示了用于调整元素大小、管理滚动行为和控制文本选择的 Tailwind CSS 类。我们将展示如何应用垂直和水平调整大小、如何通过性能优化处理滚动，以及如何控制是否选择文本。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Interactivity Example
</h2>
<h2 class="underline font-bold mb-1">
Resize Classes
</h2>
<div class="grid grid-cols-2 gap-4 mb-6">
<div>
<h3 class="underline font-semibold">resize-y</h3>
<textarea class="resize-y w-32 h-16 p-2 border
border-gray-300" placeholder="Resize vertically"></textarea>
<p class="text-sm">Vertical resizing only.</p>
</div>
<div>
<h3 class="underline font-semibold">resize-x</h3>
<textarea class="resize-x w-32 h-16 p-2 border
border-gray-300" placeholder="Resize horizontally"></textarea>
<p class="text-sm">Horizontal resizing only.</p>
</div>
</div>
<h3 class="underline font-bold mb-3">
Will Change Scroll Class
</h3>
<div class="grid grid-cols-2 mb-8">
<div class="will-change-scroll bg-blue-200 p-2
max-h-20 overflow-y-auto">
Scroll inside to see the scroll effect...
<br>Learning<br>is a<br>lifelong journey
<br>that
<br>opens doors to new<br>opportunities
<br>and<br>personal growth.
</div>
</div>
<h2 class="underline font-bold mb-2">
User Select Classes
</h2>
<div class="grid grid-cols-2 gap-6 mb-4">
<div>
<h3 class="underline font-semibold">
select-none
</h3>
<div class="select-none border border-pink-500 bg-pink-200 p-3 mb-4">
Text cannot be selected.
</div>
</div>
<div>
<h3 class="underline font-semibold">
select-all
</h3>
<div class="select-all bg-green-200 border border-green-600 p-2 mb-4">
Selecting any part highlights all text.
</div>
</div>
</div>
</body>
</html>
