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>

列印頁面