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 类来设置单选按钮、范围输入、光标类型以及控制元素对鼠标操作的响应方式。

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

在这个例子中,我们展示了 Tailwind CSS 类用于调整元素大小、管理滚动行为和控制文本选择。我们展示了如何应用垂直和水平调整大小、使用性能优化处理滚动以及控制是否可以选择文本。

Open Compiler
<!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>
广告