Tailwind CSS - 懸停、焦點和其他狀態

在Tailwind CSS中，您可以輕鬆地使用基於狀態的實用程式應用不同使用者互動的樣式。透過向類名新增修飾符，如hover:、focus:等，您可以更改使用者懸停、聚焦或進行其他互動時元素的外觀。

以下是示例程式碼。

在 Tailwind CSS 中，您可以使用諸如 **hover:** 的特殊字首來根據使用者操作更改樣式。例如，**hover:border-blue-500** 在將滑鼠懸停在元素上時會將邊框顏色更改為藍色。

示例

  
<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="font-bold text-2xl mb-4">    
        Tailwind CSS Hover Effect
    </h2>
    <div class="bg-white border-2 border-gray-300 
                p-4 rounded-lg hover:border-blue-500">
        <h2 class="text-xl font-semibold">
            Border Change
        </h2>
        <p class="text-gray-600 mt-2">
            The border color changes on hover.
        </p>
    </div>
</body>

</html>

這與傳統 CSS 相比如何？

使用傳統 CSS時，您通常透過在樣式表中定義樣式來管理懸停效果。例如，您可以使用一個類設定預設邊框顏色，然後使用另一個規則在將滑鼠懸停在元素上時更改邊框顏色。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
                background-color: white;
                /* Default border color */
                border: 2px solid gray; 
                padding: 16px;
                border-radius: 8px;
            }

        .box:hover {
            /* Border color when hovered */
            border-color: blue; 
        }
    </style>
</head>

<body>
    <div class="box">
        <h2 class="text-xl font-semibold">
            Border Change
        </h2>
        <p class="text-gray-600 mt-2">
            The border color changes on hover.
        </p>
    </div>
</body>

</html>

在此示例中，.box 類設定預設樣式，包括邊框顏色。.box:hover 在將滑鼠懸停在元素上時將邊框顏色更新為藍色。

在Tailwind CSS中，您可以透過直接在 HTML 中使用實用程式類來不同地處理此問題。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="bg-white border-2 border-gray-300 p-4 
        rounded-lg hover:border-blue-500">
        <h2 class="text-xl font-semibold">
            Border Change
        </h2>
        <p class="text-gray-600 mt-2">
            The border color changes on hover.
        </p>
    </div>
</body>

</html>

這裡，border-2 border-gray-300 設定預設邊框樣式，而 **hover:border-blue-500** 在您將滑鼠懸停在元素上時會更改邊框顏色。

Tailwind CSS 使您可以輕鬆地使用實用程式類直接在 HTML 中管理懸停效果。這種方法將所有樣式資訊儲存在一個位置，與透過單獨的 CSS 規則管理樣式相比，簡化了開發過程。

Tailwind CSS 包含各種修飾符，用於根據不同的條件設定元素的樣式。

偽類：調整像 **:hover**（懸停時）、**focus**（選中時）、**first-child**（第一個子元素）和 **required**（必填欄位）這樣的狀態的樣式。
偽元素：樣式元素的特定部分，例如 **::before**、**::after**、**::placeholder** 和 **::selection**。
媒體和特性查詢：處理響應式設計和使用者偏好，包括 **螢幕尺寸**、**深色模式**和 **減少運動**。
屬性選擇器：根據屬性設定元素的樣式，例如 **[dir="rtl"]** 用於從右到左的文字，以及 **[open]** 用於開啟的元素。

偽類

在 Tailwind CSS 中，**偽類**根據元素的狀態或互動應用樣式。它們以 **冒號 (:)** 為字首，它們管理諸如將滑鼠懸停在元素上、聚焦表單欄位等場景。讓我們詳細瞭解一下這些內容，以及一些其他主題。

懸停、焦點和活動

我們可以使用 **:hover**、**focus** 和 **active** 修飾符設定元素的樣式，使它們在我們的專案中看起來更好，並且執行良好。

檢視此示例以瞭解如何應用這些狀態。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-4">
        Tailwind CSS Hover, Focus, and Active States
    </h2>
    <input class="border p-2 hover:border-blue-500 
                  focus:outline-none focus:ring focus:ring-teal-400 
                  active:border-teal-600" placeholder="Interact with me!">
</body>

</html>

在此示例中，當您將滑鼠懸停在輸入欄位上時，其邊框顏色會發生更改；當它處於焦點狀態時，會顯示一個環；當主動單擊時，它會變成青色背景和紅色邊框。這些視覺變化向您展示了您的互動如何影響元素。

要更深入地瞭解其他偽類，例如 **:visited**、**focus-within** 和 **focus-visible**，**請訪問我們的網站**。我們提供完整的 **偽類修飾符** 列表和其他資源，以幫助您掌握 Tailwind CSS。

首尾、奇偶元素

Tailwind CSS 提供了諸如 **:first-child**、**:last-child**、**:odd** 和 **:even** 等偽類，用於根據元素在容器中的位置對其進行樣式設定。這些類允許你自定義作為其父元素中第一個或最後一個元素，或處於奇數或偶數位置的元素的外觀。

示例：卡片佈局

在卡片佈局中，你可能希望為第一張和最後一張卡片新增額外的間距或不同的樣式。以下是如何使用 **:first-child** 和 **:last-child** 偽類。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <div class="space-y-4"> 
        <div class="bg-white p-6 shadow-lg first:mt-2">
            <h3 class="text-lg font-bold">Card 1</h3>
            <p>It has no top margin due to first:mt-0.</p>
        </div>
         
        <div class="bg-white p-6 shadow-lg">
            <h3 class="text-lg font-bold">Card 2</h3>
            <p>It has standard top and bottom margins.</p>
        </div>
         
        <div class="bg-white p-6 shadow-lg last:mb-0">
            <h3 class="text-lg font-bold">Card 3</h3>
            <p>It has no bottom margin due to last:mb-0.</p>
        </div>
    </div>
</body>

</html>

在這個例子中，**:first-child** 去除了第一張卡片的頂部邊距，**:last-child** 去除了最後一張卡片的底部邊距，從而建立更具凝聚力的佈局。

示例：產品列表

在顯示產品列表時，你可能希望更改列表項的背景顏色以增強可讀性。以下是如何使用 **:odd** 和 **:even** 偽類。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <ul class="divide-y divide-gray-300">
        <li class="p-4 odd:bg-gray-100 even:bg-gray-200">
            <h4 class="text-md font-semibold text-gray-900">Horlicks</h4>
            <p class="text-gray-700">Health drinks in India</p>
        </li>
        <li class="p-4 odd:bg-gray-100 even:bg-gray-200">
            <h4 class="text-md font-semibold text-gray-900">Airtel</h4>
            <p class="text-gray-700">Mobile-based services</p>
        </li>
        <li class="p-4 odd:bg-gray-100 even:bg-gray-200">
            <h4 class="text-md font-semibold text-gray-900">LG</h4>
            <p class="text-gray-700">LG Electronics India</p>
        </li>
    </ul>
</body>

</html>

這裡，**:odd** 和 **:even** 類為交替的列表項應用不同的背景顏色，使列表更易於閱讀，並更具視覺吸引力。

有關 **:only-child** 和 **:first-of-type** 等其他偽類，請訪問我們的網站以獲取完整列表和更多資源，以提高你的 Tailwind CSS 技能。

表單狀態

我們可以使用 **Tailwind CSS** 來設定表單元素的樣式，以處理停用、必填和無效等不同狀態。請參見下面的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <form class="space-y-4">
        <!-- Disabled Input -->
        <label class="block">
            <span class="block text-sm font-medium text-gray-700">
                Phone Number</span>
            <input 
                type="text" 
                value="123-456-7890" 
                disabled 
                class="mt-1 block w-full px-3 py-2 bg-gray-200 border 
                border-gray-400 rounded-md text-sm placeholder-gray-500
                disabled:bg-gray-100 disabled:text-gray-500 
                disabled:border-gray-300"
                placeholder="Phone number"
            />
        </label>

        <!-- Required Input -->
        <label class="block">
            <span class="block text-sm font-medium text-gray-700">
                Address</span>
            <input 
                type="text" 
                required 
                class="mt-1 block w-full px-3 py-2 bg-white border 
                border-gray-300 rounded-md text-sm placeholder-gray-400
                focus:outline-none focus:border-green-500 focus:ring-1
                focus:ring-green-500 required:border-red-500 
                required:text-red-600"
                placeholder="Enter your address"
            />
        </label>

        <!-- Invalid Input -->
        <label class="block">
            <span class="block text-sm font-medium text-gray-700">
                Zip Code</span>
            <input 
                type="text" 
                class="mt-1 block w-full px-3 py-2 bg-white border 
                    border-gray-300 rounded-md text-sm placeholder-gray-400
                    focus:outline-none focus:border-orange-500 focus:ring-1 
                    focus:ring-orange-500
                    invalid:border-orange-500 invalid:text-orange-600"
                placeholder="Enter your zip code"
                pattern="\d{5}">
        </label>
 
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 
            rounded-md shadow-sm hover:bg-blue-600 focus:outline-none 
            focus:ring-2 focus:ring-blue-500">
                Submit
        </button>
    </form>
</body>

</html>

在這個例子中，你會看到：

**停用輸入：** 顯示如何設定不可編輯的輸入欄位的樣式，用獨特的背景色和邊框顏色指示其停用狀態。
**必填輸入：** 使用紅色邊框和文字顏色突出顯示必須完成的輸入欄位，以強調其重要性。
**無效輸入：** 顯示驗證失敗的輸入欄位，使用橙色邊框和文字顏色來表示錯誤。
**提交按鈕：** 包括一個用於互動的按鈕樣式，帶有懸停和焦點效果，以提供更好的使用者反饋。

Tailwind CSS 還支援其他表單狀態修飾符，如 **:read-only**、**:indeterminate** 和 **:checked**。

基於父狀態的樣式設定 (group-{modifier})

在 **Tailwind CSS** 中，你可以使用 **group** 類根據父元素的狀態來設定子元素的樣式。當你想要根據父元素的狀態（例如懸停時）更改子元素（如文字或按鈕）的外觀時，這尤其有用。

在 Tailwind CSS 中，你可以使用 **group-*** 類根據其父元素的狀態來設定子元素的樣式。以下是它的工作原理：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <div class="group p-6 bg-gray-200 border border-gray-400 
        rounded-lg hover:bg-cyan-500">
        <h2 class="text-gray-800 group-hover:text-white">
            Styling
        </h2>
        <p class="text-gray-600 group-hover:text-gray-300">
            Styling based on parent state.
        </p>
        <button class="bg-gray-800 text-white group-hover:bg-white 
            group-hover:text-gray-800 py-2 px-4 rounded">
            Click Me
        </button>
    </div>
</body>

</html>

在這個例子中，當你將滑鼠懸停在整個框上時，其中的文字和按鈕會改變顏色。我們透過將 **group** 類應用於父框並將 **group-hover** 應用於子元素來實現這一點。

區分巢狀組

使用 Tailwind CSS，你可以根據父組的狀態來設定元素的樣式。使用 **group/{name}** 來命名你的組，然後使用 **group-hover/{name}:** 根據父元素的狀態來控制子元素。

例如，你可以建立一個卡片佈局，其中附加細節只有在將滑鼠懸停在卡片上時才會出現。

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-4">
    <p class="text-center font-bold underline mb-6">
         Hover over the profiles to reveal more details...
     </p>
     <div class="flex overflow-x-auto space-x-6 pb-6">
        <!-- Profile Card 1 -->
        <div class="group bg-white p-6 border border-blue-300 rounded-lg 
            shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl w-64">
            <div class="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-blue-500 p-1">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Jane Doe" class="w-full h-full rounded-full object-cover">
            </div>
            <h2 class="text-xl font-semibold text-center text-gray-800 
                mb-1">
                    Jane Doe
            </h2>
            <p class="text-gray-600 text-center mb-4">Web Developer</p>
            <button class="absolute inset-x-0 bottom-4 mx-auto px-4 py-2 
                bg-blue-600 text-white rounded-full shadow-md transition-transform 
                transform translate-y-10 opacity-0 group-hover:opacity-100 
                group-hover:translate-y-0">
                    View Profile
            </button>
        </div>

        <!-- Profile Card 2 -->
        <div class="group bg-white p-6 border border-green-300 rounded-lg 
            shadow-lg hover:scale-105 hover:shadow-xl w-64">
            <div class="w-24 h-24 rounded-full mx-auto mb-4 border-4 
                border-green-500 p-1">
                <img src="https://randomuser.me/api/portraits/men/45.jpg" 
                    alt="John Smith" class="w-full h-full rounded-full object-cover">
            </div>
            <h2 class="text-xl font-semibold text-center text-gray-800 mb-1">
                    John Smith</h2>
            <p class="text-gray-600 text-center mb-4">
                Graphic Designer
            </p>
            <button class="absolute inset-x-0 bottom-4 mx-auto px-4 py-2 
                bg-blue-600 text-white rounded-full shadow-md transition-transform 
                transform translate-y-10 opacity-0 group-hover:opacity-100 
                group-hover:translate-y-0">
                    View Profile
            </button>
        </div>

        <!-- Profile Card 3 -->
        <div class="group bg-white p-6 border border-red-300 rounded-lg 
            shadow-lg hover:scale-105 hover:shadow-xl w-64">
            <div class="w-24 h-24 rounded-full mx-auto mb-4 border-4 
                border-red-500 p-1">
                <img src="https://randomuser.me/api/portraits/men/46.jpg" 
                    alt="Alex Johnson" class="w-full h-full rounded-full object-cover">
            </div>
            <h2 class="text-xl font-semibold text-center text-gray-800 mb-1">
                    Alex Johnson</h2>
            <p class="text-gray-600 text-center mb-4">UX Designer</p>
            <button class="absolute inset-x-0 bottom-4 mx-auto px-4 py-2 
                bg-blue-600 text-white rounded-full shadow-md transition-transform 
                transform translate-y-10 opacity-0 group-hover:opacity-100 
                group-hover:translate-y-0">
                    View Profile
            </button>
        </div>
    </div>
</body>

</html>

在上面的例子中，每張卡片都有一張個人資料圖片和一些細節，這些細節會在懸停時發生變化。Tailwind 的 **group** 類和 **group-hover** 實用程式控制懸停效果和樣式。

只需將正確的類新增到你的 HTML 中，Tailwind 就會處理其餘的工作。

任意組

Tailwind CSS 中的 **任意組** 允許你透過在方括號內定義你自己的 CSS 選擇器來動態建立自定義 **group-*** 修飾符。這允許你應用獨特的樣式而無需使用預定義的類。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-6">
  <div class="group custom-highlight p-4 
    bg-gray-100">
    <div class="hidden group-[.custom-highlight]:block 
        mt-4 p-2 bg-blue-100 text-blue-800 rounded">
          This content is visible when the outer 
          box has the 'custom-highlight' class!
    </div>
  </div>
</body>

</html>

為了更精確的控制，Tailwind CSS 允許你使用 **&** 字元來定義 **.group** 類應該相對於你的自定義選擇器應用的位置。此技術有助於建立更具針對性的樣式。

示例

 <div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

使用 Tailwind CSS 基於兄弟狀態設定樣式

在 **Tailwind CSS** 中，你可以透過向兄弟元素新增 **peer** 類並使用 **peer-*** 修飾符進行樣式設定來根據兄弟元素的狀態設定元素的樣式。例如，如果兄弟輸入無效，你可以使用 **peer-invalid** 來更改相關元素的外觀。

此示例演示瞭如何使用 Tailwind CSS 的 **peer** 類根據兄弟元素的狀態設定元素的樣式。單擊複選框以檢視更改。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
  <h3 class="underline font-bold">
      Click the checkbox to see peer 
      styling in action.
  </h3>
  <div class="flex flex-col space-y-4">     
    <!-- Checkbox input to toggle the state -->
    <input type="checkbox" id="toggle" 
        class="peer hidden">
    <label for="toggle" class="cursor-pointer p-2 bg-sky-500 
        text-white rounded peer-checked:bg-teal-500
            peer-checked:text-black">
            Toggle me
    </label>
    
    <!-- Description that appears 
        when checkbox is checked -->
    <p class="hidden peer-checked:block text-green-700">
      Checkbox is checked!
    </p>
  </div>
</body>

</html>

此技術支援各種樣式效果，例如浮動標籤，所有這些都不需要 JavaScript。

**peer** 類適用於 **偽類** 修飾符，如 **peer-focus**、**peer-required** 和 **peer-disabled**。但是，請注意，**peer** 類只能影響其後的元素。它不能設定前面元素的樣式，如下所示：

示例

<!-- This will not work because the input is the previous sibling -->
<label>
  <span class="peer-invalid:text-red-500">Error Message</span>
  <input type="checkbox" class="peer" />
</label>

在這種情況下，由於 **span** 在 peer 元素之前，因此無法根據複選框狀態設定其樣式。

區分 Peer 元素

當使用多個 **peer** 元素時，可以透過為每個元素賦予唯一的名稱來區分它們。對元素使用 **peer/{name}** 類，並使用 **peer-checked/{name}** 修飾符來定位選定狀態以應用樣式。

示例：亮/暗模式切換

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
  <fieldset>
        <legend class="font-bold">Select View Mode</legend>
    
        <!-- Radio buttons for selecting view modes -->
        <input id="light" class="peer/light hidden" type="radio" 
            name="view" checked />
        <label for="light" class="cursor-pointer 
            peer-checked/light:text-indigo-600">
                Light Mode
        </label>
    
        <input id="dark" class="peer/dark hidden" type="radio" 
            name="view" />
        <label for="dark" class="cursor-pointer 
            peer-checked/dark:text-red-600">
                Dark Mode
        </label>
    
        <!-- Content sections -->
        <div class="hidden peer-checked/light:block text-gray-800 
            bg-gray-100 p-4 rounded border border-gray-300">
              You have selected Light Mode.
        </div>
        <div class="hidden peer-checked/dark:block text-gray-100 
            bg-gray-800 p-4 rounded border border-gray-300">
              You have selected Dark Mode.
        </div>
    </fieldset>
</body>

</html>

此示例演示瞭如何使用唯一的名稱（**light** 和 **dark**）根據所選模式設定元素的樣式。選擇單選按鈕時，它會相應地更新標籤和訊息，使用 **peer-checked/{name}** 類來應用樣式。

**注意：**每個 peer 元素都在 HTML 中直接命名。Tailwind 自動處理必要的 CSS，因此無需額外的配置。

任意 Peer 元素

你可以使用方括號建立具有唯一值的自定義 **peer-*** 修飾符。此方法允許根據特定條件或選擇器設定元素的樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
  <p class="mb-4">
    Click on the username input field.
  </p>
  <form class="group">
    <div class="flex flex-col space-y-4">
      <label for="username">Username:</label>
      <input id="username" name="username" type="text" 
        class="focus:ring-2 focus:ring-blue-500 border 
            border-gray-300 p-2 rounded" required />
        <!-- Message shown when input is focused -->
      <div class="hidden group-focus-within:block mt-2 
          p-2 bg-yellow-100 border border-yellow-300 rounded">
            This input is focused.
      </div>
    </div>
  </form>
</body>

</html>

在此示例中，當 <input> 獲得焦點時，訊息會顯示。

為了更精確地控制樣式，你可以使用“**&**”字元將 **.peer** 類精確地放置在你想要在最終 CSS 選擇器中放置的位置。這種方法允許你根據元素的狀態或它們相對於兄弟元素的位置來定位元素。

<div>
  <!-- Input field with a peer class -->
  <input type="text" class="peer" />
  
  <!-- Message that appears based on the position of the peer element -->
  <div class="hidden peer-[:nth-of-type(3)_&]:block">
    <!-- Content shown when the input is the third child of its parent -->
    Content for the third input.
  </div>
</div>

在此示例中，只有當 <input> 是其父元素的第三個子元素時，<div> 才會出現。**peer-[:nth-of-type(3)_&]:block** 類使用 **&** 將 **.peer** 正確放置在選擇器中，從而能夠根據 peer 元素的狀態設定樣式。

設定直接子元素的樣式 (*-{modifier})

在 **Tailwind CSS** 中，**'*'** 修飾符允許你在無法直接修改子元素時，將樣式應用於元素的直接子元素。此方法可確保透過其父元素對所有直接子元素進行一致的樣式設定。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div>
      <h2 class="font-bold mb-4 underline">Team Members</h2>
      <ul class="list-disc list-inside *:text-indigo-700 *:border 
            *:border-black *:bg-cyan-50 *:p-2">
        <li>Alice</li>
        <li>Bob</li>
        <li>Charlie</li>
      </ul>
    </div>
</body>

</html>

在此示例中，***:text-blue-500**、***:border**、***:border-blue-200**、***:bg-blue-50**、***:p-2** 類將樣式應用於 <ul> 內的所有 <li> 元素，確保所有直接子元素的顏色、邊框、背景和填充一致。

**重要：** 請記住，由於 CSS 特異性，直接將樣式應用於子元素不會覆蓋其父元素上設定的樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
  <div>
    <h2 class="font-bold mb-4 underline">Team Members</h2>
    <ul class="list-disc list-inside *:text-indigo-700 *:border
          *:border-black *:bg-cyan-50 *:p-2">
      <li class="text-red-800">Alice</li>
      <li>Bob</li>
      <li>Charlie</li>
    </ul>
  </div>
</body>

</html>

在此示例中，父 <ul> 的背景顏色將覆蓋在各個 <li> 專案上設定的背景顏色。這意味著 <li> 專案無法使用其自身的背景顏色樣式來更改它。

基於後代元素的樣式設定 (has-{modifier})

Tailwind CSS 中的 **has-*** 修飾符允許你根據其子元素的狀態或內容來設定元素的樣式。這意味著你可以根據其後代元素是否處於特定狀態或包含某些元素來應用樣式到父元素。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>  

<body class="p-6 bg-gray-100">
  <div class="p-4 border rounded-lg ease-in-out
          has-[input:focus]:border-blue-500 
          has-[input:focus]:bg-blue-50
          border-gray-300 bg-white">
    <label class="block mb-2 text-gray-700">
        Username:
    </label>
    <input type="text" placeholder="Enter your username" 
            class="w-full p-2 border rounded-md">
  </div>
</body>

</html>

在上面的例子中，當輸入欄位獲得焦點時，**has-[input:focus]** 會更改父 <div> 的邊框和背景顏色。

Tailwind CSS 中的 **has-*** 實用程式允許根據子元素的狀態或存在來設定父元素的樣式，例如如果輸入獲得焦點 (**has-[:focus]**) 、如果存在影像 (**has-[img]**) 或內部有連結 (**has-[a]**) 時更改樣式。

基於組的後代元素的樣式設定 (group-has-{modifier})

要根據元素的後代設定樣式，請在父元素上使用 **group** 類，並對子元素使用 **group-has-*** 修飾符。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
  <div class="group p-6 bg-white border border-gray-200 rounded-lg shadow-lg max-w-sm mx-auto">
      <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png" alt="Profile Picture"
         class="w-32 h-32 rounded-full mx-auto mb-4 border-4
         border-gray-200">
    <h4 class="text-2xl font-bold text-center">Casey Jordan</h4>
    
    <svg class="hidden group-has-[a]:block w-8 h-8 text-blue-500 mx-auto mb-3" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2L2 12h3v8h8v-8h3L12 2z"/>
    </svg>
    <p class="text-gray-600 text-center">
        Just happy to be here.
    </p>
    <a href="https://tutorialspoint.tw" class="text-blue-600
            hover:underline block text-center mt-2">
        Visit my website
    </a>
    
    <!-- Toggle Button for Details -->
    <button class="mt-4 px-6 py-3 bg-green-600 text-white 
        rounded-md group-has-[.details:focus-within]:bg-green-800
            transition-colors">
        Show Details
    </button>
     
    <div class="details hidden mt-4 p-4 bg-gray-100 border 
        border-gray-300 rounded-md 
        group-has-[button:focus-within]:block">
        Here are some additional details that become 
        visible when the button is focused or clicked.
    </div>
  </div>
</body>

</html>

在此示例中，**group** 類允許根據組的狀態將樣式應用於子元素。**group-has-[a]:block** 修飾符在存在連結時顯示徽章圖示，而 **group-has-[button:focus-within]:bg-green-800** 修飾符在詳細資訊部分可見時更改按鈕顏色，這顯示了 **group-has-*** 如何根據其後代的狀態動態設定元素的樣式。

基於 Peer 元素的後代元素的樣式設定 (peer-has-{modifier})

你可以透過向兄弟元素新增 **peer** 類並使用 **peer-has-*** 修飾符來定位要設定樣式的元素，根據其兄弟元素的後代設定元素的樣式。這樣，你可以根據兄弟元素包含的內容應用樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-4">
  <fieldset class="p-4 border border-gray-300 
                   rounded-lg bg-teal-100">
    <legend class="text-lg font-semibold">
        Select an Option
    </legend>
    <div class="flex flex-col space-y-2">
      <label class="flex items-center space-x-2 peer">
        <input type="radio" name="option" value="1" 
               class="peer-checked:bg-blue-500" />
        <span>Option 1</span>
      </label>
      <label class="flex items-center space-x-2 peer">
        <input type="radio" name="option" value="2" 
                     class="peer-checked:bg-blue-500" />
        <span>Option 2</span>
      </label>
      <div class="mt-4 text-blue-800 
                  peer-has-[input:checked]:block hidden">
            This message appears when any radio button 
            is selected.
      </div>
    </div>
  </fieldset>
</body>

</html>

在此示例中，**peer** 類將元素連結在一起。**peer-has-[input:checked]:block** 類僅在選擇單選按鈕時（基於 peer 狀態）使訊息可見。

偽元素

Tailwind CSS 中的 **偽元素** 用於設定元素內容的特定部分的樣式，例如在元素之前或之後新增內容，以及其他用途。我們將在下面詳細介紹每個主題。

before 和 after

在 **Tailwind CSS** 中，你可以使用 **before:** 和 **after:** 實用程式將樣式應用於 **::before** 和 **::after** 偽元素，使你能夠新增裝飾性內容或調整佈局而無需修改 HTML。

這是一個顯示如何使用 **:before** 偽元素設定元素樣式的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 flex bg-gray-200">
  <div class="bg-white p-8 shadow-lg rounded-md w-full max-w-lg">
    <h3 class="font-bold underline mb-4">Asterisk added before label</h3>
    <label class="flex flex-col">
        <span class="before:content-['*'] before:ml-0.5 before:text-pink-500 
                     block text-sm font-medium text-slate-700">
                Email Address
      </span>
      <input type="email" name="email" class="mt-2 px-4 py-2
                   bg-gray-50 border border-gray-300 rounded-md  placeholder-gray-500" 
                   placeholder="you@example.com" />
    </label>
  </div>
</body>

</html>

此示例使用 **:before** 偽元素在標籤文字之前新增星號。**before:content-['*']** 類插入星號，而 **before:ml-0.5** 新增邊距，**before:text-pink-500** 設定其顏色。

這是一個顯示如何使用 **:after** 偽元素設定元素樣式的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 flex bg-gray-200">
  <div class="bg-white p-8 shadow-lg rounded-md w-full max-w-lg">
    <h3 class="font-bold underline mb-4">Text with a suffix</h3>
    <div class="relative">
      <span class="after:content-['✔'] after:ml-2 after:text-green-500
                   block text-sm font-medium text-slate-700">
            Task Completed
      </span>
    </div>
  </div>
</body>

</html>

此示例使用:after偽元素在文字後新增一個複選標記。after:content-['✔'] 類插入複選標記，after:ml-2 在右側新增邊距，after:text-green-500 設定其顏色。

關於偽元素的說明：Tailwind CSS 預設自動應用content: ''，因此通常不需要指定它。如果已關閉 Tailwind 的預設樣式，則需要手動新增content-['']。

並非總是需要偽元素。對於更簡單的任務，使用<span>之類的 HTML 元素可能更容易且更直接。

這是一個使用<span>元素實現與 Tailwind CSS 中::before 或::after偽元素類似效果的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-200">
  <div class="bg-white p-8 shadow-lg rounded-md w-full max-w-lg">
    <h3 class="font-bold underline mb-4">Using Span for Decoration</h3>
    <p class="text-sm font-medium text-slate-700">
        Task
      <span class="relative inline-block ml-2">
        <span class="absolute -inset-1 bg-green-500 -skew-y-3"></span>
        <span class="relative text-white">✔</span>
      </span>
        Completed
    </p>
  </div>
</body>

</html>

當需要新增不應屬於 HTML 結構或使用者無法選擇的內容時，使用::before 和::after。

如果已停用 Tailwind 的預設樣式，則需要手動新增content-['']才能使偽元素正常工作。

<div class="before:content-[''] before:block ...">
  <!-- Content here -->
</div>

佔位符文字

在 Tailwind CSS 中，您可以使用placeholder 修飾符來設定輸入和文字區域欄位中佔位符文字的樣式。透過應用諸如placeholder-{color}之類的實用程式類，您可以輕鬆調整佔位符文字的顏色和樣式以匹配您的設計需求。

這是一個使用 Tailwind CSS 設定佔位符文字樣式的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-300">
  <div class="bg-white p-6 shadow-lg rounded-lg w-full max-w-md">
    <label class="block mb-4">
      <span class="text-sm font-medium text-gray-800">
          Phone Number
      </span>
      <input type="tel" class="mt-2 px-3 py-2 border border-gray-300
                               rounded-md placeholder-gray-400 hover:placeholder-teal-400
                               focus:placeholder-red-500" 
        placeholder="Enter your phone number"/>
    </label>
  </div>
</body>

</html>

在此示例中，電話號碼輸入的佔位符文字預設為灰色，懸停時變為青綠色，聚焦時變為紅色。

檔案輸入按鈕

在Tailwind CSS中，您可以使用file修飾符來設定檔案輸入按鈕的樣式。這允許您修改檔案上傳按鈕的外觀，包括其大小、邊框、背景顏色和文字。

這是一個簡單的示例，展示如何在 Tailwind CSS 中設計檔案上傳按鈕。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-200">
  <div class="bg-white p-6 shadow-lg rounded-lg max-w-md">
    <label class="block mb-4">
      <span class="text-sm font-bold text-red-700">
          Upload your file
      </span>
      <input type="file" 
             class="mt-2 file:border file:border-red-900
                    file:py-2 file:px-5 file:rounded-2xl file:bg-red-500 
                    file:text-white file:font-serif file:cursor-pointer
                    hover:file:bg-red-600"/>
    </label>
  </div>
</body>

</html>

在此示例中，我們使用紅色背景、圓角和填充來設定file輸入按鈕的樣式。file: 修飾符調整邊框、背景和文字顏色，並具有懸停效果，以增強互動性。

Tailwind CSS 不會自動為檔案輸入按鈕應用邊框。要包含邊框，請使用file:border 和file:border-solid之類的類，以及任何border-width實用程式。例如：

<input type="file" class="file:border file:border-solid ..."/>

列表標記

在Tailwind CSS中，您可以使用marker修飾符來設定列表中標記或專案符號的樣式。這允許您透過調整列表專案標記（例如專案符號或數字）的顏色、大小和其他樣式來修改其外觀。

這是一個簡單的示例，展示如何使用 Tailwind CSS 設定列表專案標記的樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
  <div class="max-w-sm mx-auto bg-white p-6 shadow-xl rounded-lg">
    <h2 class="text-xl font-bold mb-4 underline">
        My Morning Routine
    </h2>
    <ul class="list-disc pl-5 marker:text-purple-600 
                text-stone-600 marker:text-lg space-y-2">
        <li>Wake up and make the bed</li>
        <li>Go for a 30-minute jog</li>
        <li>Prepare and eat a healthy breakfast</li>
        <li>Review the day's schedule</li>
    </ul>
  </div>
</body>

</html>

該示例顯示了一個樣式化的待辦事項列表，其中包含紫色標記 (marker:text-purple-600)、較大的標記文字 (marker:text-lg)，並且每個專案都間隔開。它展示瞭如何使用 Tailwind CSS 設定列表標記的樣式。

此外，標記修飾符可以應用於父元素，因此您可以一致地設定所有列表項的樣式，而無需為每個專案重複樣式。

高亮文字

在Tailwind CSS中，您可以使用selection修飾符來設定使用者選擇的文字樣式，它會更改所選文字的背景和文字顏色。透過應用selection:bg-{color}和selection:text-{color}之類的實用程式，您可以控制高亮文字的顯示方式，確保它與您的整體設計相符。

讓我們設定樣式並瞭解如何使用 Tailwind CSS 中的 selection 修飾符來高亮顯示文字。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
  <div class="max-w-lg mx-auto bg-white p-6 shadow-xl rounded-lg">
    <h2 class="text-xl font-bold mb-4">
        Highlight text with the mouse
    </h2>
    <p class="text-slate-800 selection:bg-cyan-400 
              selection:text-pink-700">
        This is an example of how text selection can be styled using
        Tailwind CSS. When you select this text, you will see the
        background color of the selected text changes to yellow 
        and the text color to blue.
    </p>
  </div>
</body>

</html>

此示例演示瞭如何使用 Tailwind CSS 設定所選文字的樣式。當用滑鼠突出顯示文字時，背景變為青色，文字顏色變為粉紅色。

selection修飾符可以應用於 HTML 中的任何級別，影響所有巢狀元素。這使得確保整個網站的選擇顏色一致變得很簡單。例如：

<html>
<head>
    <!-- ... -->
</head>

<body class="selection:bg-pink-300">
    <!-- ... -->
</body>

</html>

首行和首字母

在Tailwind CSS中，您可以使用::first-line和::first-letter實用程式直接在 HTML 中設定文字塊的首行和首字母的樣式，從而輕鬆應用粗體文字或大字母等唯一樣式。

讓我們透過示例瞭解如何在 Tailwind CSS 中使用這些類。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script> 
</head> 

<body class="p-6 bg-gray-100 items-center">
    <div class="bg-white shadow-lg max-w-md rounded-lg p-6  ">
        <p class="first-line:font-semibold first-line:text-green-700 
                  first-letter:text-6xl first-letter:font-extrabold
                  first-letter:text-red-600 first-letter:mr-4
                  first-letter:float-left">
            Creativity is intelligence having fun. Albert Einstein
            once said, "Imagination is more important than knowledge." 
            This quote emphasizes the power of creative thinking
            and the importance of nurturing our imaginative abilities.
        </p>
    </div>
</body>

</html>

在上面的示例中，我們應用了first-line:font-semibold和first-letter:text-5xl之類的 Tailwind 實用程式來設定文字樣式：首行為粗體綠色，首字母為紅色的大號粗體。

對話方塊背景

在Tailwind CSS中，backdrop修飾符設定<dialog>元素後面半透明區域的樣式，允許您在對話方塊開啟時修改背景外觀。

這是一個簡單的示例，展示如何在 Tailwind CSS 中使用這些類。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script> 
</head> 
 
<body class="p-4">
  <button onclick="document.getElementById('myDialog').showModal()"
          class="bg-blue-500 text-white px-4 py-2 rounded">
      Open Dialog
  </button>
  <dialog id="myDialog" class="backdrop:bg-black/50 p-6 rounded-lg">
      <h2 class="text-xl font-semibold">
          Important Notice
      </h2>
      <p class="mt-2 text-slate-300">
          This is a dialog with a darkened backdrop to make the 
          content stand out more.
      </p>
      <button onclick="document.getElementById('myDialog').close()"
              class="mt-2 bg-red-500 text-white px-4 py-2 rounded">
          Close
      </button>
  </dialog>
</body>

</html>

在上面的示例中，我們應用了backdrop:bg-black/50，它為對話方塊背景添加了一個半透明黑色背景，從而產生了一種調暗效果，以突出顯示模態內容。

媒體和特性查詢

Tailwind CSS 中的媒體和特性查詢會根據不同的螢幕尺寸和特性調整樣式。使用簡單的類字首，如sm:、md:、lg:和xl:，您可以輕鬆建立適用於任何裝置的響應式設計。

響應式斷點

在 Tailwind CSS 中，您可以使用響應式斷點根據螢幕尺寸為元素應用不同的樣式，確保您的設計在所有裝置上都能很好地顯示。

例如，透過使用針對中等螢幕的響應式修飾符md和針對大螢幕的lg，您可以調整網格佈局中的列數或更改字型大小和間距，從而建立靈活且自適應的使用者體驗。

讓我們透過一個根據螢幕尺寸調整的響應式產品網格佈局示例來了解一下。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script> 
</head> 
 
<body class="p-4 bg-gray-300"> 
  <div class="grid grid-cols-1 sm:grid-cols-2 
              md:grid-cols-3 gap-4 p-2">
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Classic Watch
      </h3>
      <p class="text-gray-600">
          Timeless design
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Bluetooth Speaker
      </h3>
      <p class="text-gray-600">
          Powerful sound
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Wireless Earbuds
      </h3>
      <p class="text-gray-600">
          Noise-cancelling
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Smartphone Stand
      </h3>
      <p class="text-gray-600">
          Adjustable angle
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Portable Charger
      </h3>
      <p class="text-gray-600">
          High capacity
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Ergonomic Mouse
      </h3>
      <p class="text-gray-600">
          Comfortable grip
      </p>
    </div>
  </div> 
</body>

</html>

在上面的示例中，我們有一個響應式網格佈局：在移動螢幕上，相簿顯示 1 列 (grid-cols-1)。在小螢幕上，它切換到 2 列 (sm:grid-cols-2)，在中等螢幕（例如平板電腦）上，它調整為 3 列 (md:grid-cols-3)。

首選顏色方案

Tailwind CSS中的prefers-color-scheme媒體查詢檢測使用者是否更喜歡淺色或深色主題，通常在作業系統級別設定。Tailwind CSS 使用此功能來幫助您建立自動調整以適應使用者主題偏好的設計。

透過使用淺色模式的預設實用程式並應用dark修飾符來覆蓋深色模式的樣式，您可以確保您的網站在兩種模式下都易於閱讀。

讓我們來看一個如何為淺色和深色模式應用 Tailwind CSS 類的簡單示例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-200">
  <div class="grid grid-cols-2 space-x-4">
    <div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8
                shadow-xl">
    <div>
        <span class="inline-flex p-2 bg-blue-500 rounded-md 
                     shadow-lg">
          <!-- icon (symbol) -->
          <svg class="h-6 w-6 text-white" fill="none" 
                      viewBox="0 0 24 24" stroke="currentColor" 
                      aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2" d="M5 13l4 4L19 7"/>
          </svg>
        </span>
      </div>
      <h3 class="text-slate-900 dark:text-white mt-5 text-base
                 font-medium tracking-tight">
          Amazing Features
      </h3>
      <p class="text-slate-500 mt-2 text-sm">
        Explore the new features we've added to enhance your
        experience. This update is designed to improve
        functionality and performance.
      </p>
    </div>
    <!-- Card 2 -->
    <div class="bg-gray-800 dark:bg-gray-700 rounded-lg px-6 
        py-8 ">
      <div>
        <span class="inline-flex p-2 bg-blue-600 dark:bg-blue-700 
                     rounded-md shadow-lg">
          <!-- Example icon (symbol) -->
          <svg class="h-6 w-6 text-white" fill="none" 
                      viewBox="0 0 24 24" stroke="currentColor" 
                      aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" 
                stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </span>
      </div>
      <h3 class="text-gray-100 dark:text-gray-200 mt-5 font-medium">
        Amazing Features
      </h3>
      <p class="text-gray-300 dark:text-gray-400 mt-2 text-sm">
        Explore the new features we've added to enhance your 
        experience. This update is designed to improve 
        functionality and performance.
      </p>
    </div>
  </div>
</body>

</html>

在上面的示例中，我們使用 Tailwind CSS 類來設定淺色和深色模式的內容樣式。對於淺色模式，應用了bg-white和text-slate-500之類的類。對於深色模式，使用了dark:bg-slate-800和dark:text-slate-400之類的類。

首選減少運動

在Tailwind CSS中，prefers-reduced-motion媒體查詢可幫助您為更喜歡在螢幕上減少移動的使用者調整設計。

使用motion-reduce修飾符可以為想要減少運動的使用者停用或最小化動畫。相反，motion-safe修飾符確保僅為尚未請求減少運動的使用者應用動畫，這簡化了您的樣式設定。

這是一個簡單的示例，展示 Tailwind CSS 如何處理減少運動偏好。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
    <div class="fixed">
    <div class="motion-safe:animate-bounce motion-reduce:animate-none 
                rounded-lg px-4 py-2 shadow-lg bg-gradient-to-r from-teal-500 
                to-purple-500 text-white">
      <p class="text-sm">New message received!</p>
    </div>
  </div>
</body>

</html>

在此示例中，如果允許動畫 (motion-safe:animate-bounce)，則訊息框將反彈，但如果首選減少運動 (motion-reduce:animate-none)，則它將保持靜止。這樣，設計就會根據使用者的運動偏好進行調整。

使用motion-safe修飾符有助於您僅在使用者未請求減少運動時應用動畫，這通常比管理多個motion-reduce覆蓋更直接。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
  <div class="grid grid-cols-2 gap-6">
    <div>
      <p class="underline font-bold mb-2">
            Using motion-reduce
      </p>
        <button class="bg-blue-500 text-white font-semibold py-2 
                       p-4 rounded-lg shadow-lg hover:bg-blue-400 
                       motion-reduce:hover:bg-blue-300 
                       motion-reduce:transition-none">
                Update Profile
        </button>
    </div>

    <div>
        <p class="underline font-bold mb-2">
            Using motion-safe
        </p>
        <button class="bg-blue-500 text-white font-semibold
                       py-2 px-4 rounded-lg shadow-lg transition-transform 
                       transform motion-safe:hover:bg-blue-400 
                       motion-safe:hover:-translate-y-1">
                Update Profile
        </button>
    </div>
  </div>
</body>

</html>

首選對比度

Tailwind CSS 中的prefers-contrast會根據使用者需要文字和背景之間多少顏色差異來調整網站的樣式。

使用contrast-more修飾符可以提供更高的對比度以提高可讀性，而contrast-less修飾符則可以為那些更喜歡較低對比度的人提供更柔和的外觀。

這是一個簡單的示例，展示瞭如何在 Tailwind CSS 中使用prefers-contrast。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
    <div class="flex justify-between">
    <!-- Left Section: Low Contrast -->
        <div class="w-1/2 p-6 bg-gray-300 text-gray-700 
                    rounded-lg shadow-lg contrast-less:bg-gray-200 
                    contrast-less:text-gray-600">
          <h2 class="text-xl font-semibold mb-2 
                     contrast-less:text-gray-800">
                Low Contrast Design
          </h2>
          <p class="contrast-less:text-gray-700">
                This section shows a low-contrast design with softer 
                colors and less intense visibility.
          </p>
          <button class="mt-3 px-4 py-2 bg-blue-300 text-gray-800 
                         rounded hover:bg-blue-400 contrast-less:bg-blue-200">
                Learn More
          </button>
        </div>
        
        <!-- Right Section: High Contrast -->
        <div class="w-1/2 p-6 bg-black text-white rounded-lg 
                    shadow-lg contrast-more:bg-black contrast-more:text-white">
          <h2 class="text-xl font-semibold mb-2 
                     contrast-more:text-yellow-300">
                High Contrast Design
          </h2>
          <p class="contrast-more:text-gray-300">
                This section shows a high-contrast design with bold 
                colors and strong visibility.
          </p>
          <button class="mt-3 px-4 py-2 bg-red-600 text-black 
                         rounded-md hover:bg-red-700 contrast-more:bg-red-500">
                Learn More
          </button>
        </div>
    </div>
</body>

</html>

在示例中，我們展示了較低和較高對比度。左側使用帶有柔和顏色的較低對比度，而右側則使用更大膽、更鮮明的顏色來實現較高對比度。這使得右側的文字和元素在背景中更加突出。

強制顏色模式

Tailwind CSS中的強制顏色模式是一項功能，使使用者能夠將他們自己的顏色偏好應用於網站。此模式會覆蓋文字、背景和按鈕等元素的預設顏色，使它們與使用者的首選顏色設定一致，並確保足夠的對比度以提高可讀性。

這是一個簡單的示例，展示如何使用 Tailwind CSS 來處理強制顏色模式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-10">
    <h2 class="text-lg font-bold mb-4">Select Your Theme:</h2>

    <div class="overflow-x-auto">
      <form class="flex gap-6 min-w-max">
        <!-- Cyan Theme -->
        <label class="flex flex-col items-center gap-2 p-4 border border-gray-200 
                      rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow duration-300">
          <input type="radio" name="theme" class="hidden peer" />
          <div class="relative border rounded-full w-20 h-20 flex items-center 
                      justify-center peer-checked:bg-cyan-100 peer-checked:border-cyan-800">
            <div class="absolute top-3 left-3 h-8 w-8 rounded-full bg-cyan-100 
                        border border-cyan-300 peer-checked:border-cyan-800"></div>
            <div class="h-8 w-8 rounded-full bg-cyan-500 z-10"></div>
          </div>
          <p class="text-center text-gray-700">Cyan</p>
        </label>

        <!-- Green Theme -->
        <label class="flex flex-col items-center gap-2 p-4 border border-gray-200 
                      rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow duration-300">
          <input type="radio" name="theme" class="hidden peer" />
          <div class="relative border rounded-full w-20 h-20 flex items-center 
            justify-center peer-checked:bg-green-100 peer-checked:border-green-800">
            <div class="absolute top-3 left-3 h-8 w-8 rounded-full bg-green-100 
                        border border-green-300 peer-checked:border-green-800"></div>
            <div class="h-8 w-8 rounded-full bg-green-500 z-10"></div>
          </div>
          <p class="text-center text-gray-700">Green</p>
        </label>

        <!-- Red Theme -->
        <label class="flex flex-col items-center gap-2 p-4 border border-gray-200 
                      rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow duration-300">
          <input type="radio" name="theme" class="hidden peer" />
          <div class="relative border rounded-full w-20 h-20 flex items-center 
                      justify-center peer-checked:bg-red-100 peer-checked:border-red-800">
            <div class="absolute top-3 left-3 h-8 w-8 rounded-full bg-red-100 
                        border border-red-300 peer-checked:border-red-800"></div>
            <div class="h-8 w-8 rounded-full bg-red-500 z-10"></div>
          </div>
          <p class="text-center text-gray-700">Red</p>
        </label>

        <!-- Purple Theme -->
        <label class="flex flex-col items-center gap-2 p-4 border border-gray-200 
                      rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow duration-300">
          <input type="radio" name="theme" class="hidden peer" />
          
          <div class="relative border rounded-full w-20 h-20 flex items-center 
                      justify-center peer-checked:bg-purple-100 peer-checked:border-purple-800">
            <div class="absolute top-3 left-3 h-8 w-8 rounded-full bg-purple-100 
                        border border-purple-300 peer-checked:border-purple-800"></div>
            <div class="h-8 w-8 rounded-full bg-purple-500 z-10"></div>
          </div>
          <p class="text-center text-gray-700">Purple</p>
        </label>

        <!-- Sky Theme -->
        <label class="flex flex-col items-center gap-2 p-4 border border-gray-200 
                      rounded-lg shadow-md cursor-pointer">
          <input type="radio" name="theme" class="hidden peer" />
          <div class="relative border rounded-full w-20 h-20 flex items-center 
                      justify-center peer-checked:bg-sky-100 peer-checked:border-sky-800">
            <div class="absolute top-3 left-3 h-8 w-8 rounded-full bg-sky-100 
                        border border-sky-300 peer-checked:border-sky-800"></div>
            <div class="h-8 w-8 rounded-full bg-sky-500 z-10"></div>
          </div>
          <p class="text-center text-gray-700">Sky</p>
        </label>
    </div>
</body>

</html>

在此示例中，我們使用Tailwind CSS建立了一個帶有主題選擇卡的響應式表單，並添加了一個水平捲軸來檢視所有選項。這展示瞭如何實現具有不同顏色選項的主題選擇器，並展示了使用 Tailwind CSS 實用程式來管理佈局和樣式。

視口方向

在 Tailwind CSS 中，視口方向是指裝置螢幕的放置方式——垂直（縱向）或水平（橫向）。透過使用 Tailwind 的縱向和橫向修飾符，您可以根據螢幕的方向應用特定樣式。

讓我們來看一個簡單的例子來更好地理解這一點。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h3 class="underline font-bold text-xl mb-4">
        Content changes based on screen orientation.
    </h3>
  <div class="container mx-auto">
    <!-- Content for portrait mode -->
    <div class="portrait:flex hidden items-center 
                justify-center h-64 bg-blue-200">
        <p class="text-lg font-semibold">
            You are viewing this in portrait mode.
        </p>
    </div>

    <!-- Content for landscape mode -->
    <div class="landscape:flex hidden items-center 
                justify-center h-64 bg-green-200">
        <p class="text-lg font-semibold">
            You are viewing this in landscape mode.
        </p>
    </div>
  </div>
</body>

</html>

在上面的示例中，內容可見性會根據視口的寬高比而變化。portrait:flex類在縱向模式下顯示內容，在橫向模式下隱藏內容，而landscape:flex類則相反。

列印樣式

在 Tailwind CSS 中，列印樣式允許您控制列印時內容的顯示方式。透過使用列印修飾符，例如.print:hidden來隱藏內容和.print:block僅在列印時顯示內容，您可以確保列印的文件整潔。

這是一個簡單的示例，展示了這些類的作用。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
  <div>
    <!-- Content visible on screen, hidden during print -->
    <section class="print:hidden bg-teal-100 p-4 mb-4">
      <h1 class="text-2xl font-bold">
          Welcome to Our Website
      </h1>
      <p>
          This section is visible on the screen but 
          will not appear in the print version.
      </p>
    </section>

    <!-- Content visible only when printing -->
    <section class="hidden print:block bg-yellow-100 p-4">
      <h1 class="text-xl font-bold">
          Print Version
      </h1>
      <p>
          This section appears only in the print 
          version of the page.
      </p>
    </section>
  </div>
</body>

</html>

在上例中，**print:hidden** 部分在螢幕上可見，但在列印時隱藏；而帶有 hidden **print:block** 的部分僅在列印版本中出現，從而實現不同的內容顯示。

支援規則

**Tailwind CSS** 提供了一個名為 **supports-[] 修飾符** 的功能，使您可以根據使用者的瀏覽器是否支援特定的 CSS 功能來應用樣式。

Tailwind CSS 中的 **supports-[] 修飾符** 在內部生成 **@supports** 規則。這允許您定位特定的 CSS 功能和屬性，僅當用戶瀏覽器支援該功能時才應用樣式。

使用語法 **supports-[feature]** 使用修飾符，其中 feature 是 CSS 屬性和值，或者使用 and/or 的條件。

這是一個簡單的示例，展示瞭如何使用 **supports-[] 修飾符** 來根據功能支援應用樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
  <div class="flex supports-[display:grid]:grid 
              supports-[display:grid]:gap-4 shadow-xl">
    <div class="bg-blue-100 p-4">
        Here's the first section;</div>
    <div class="bg-green-200 p-4">
        Welcome to second part!</div>
  </div>

  <div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 
              supports-[backdrop-filter]:backdrop-blur-lg p-4 mt-4 shadow-2xl">
        This section will have a backdrop blur 
        effect if the browser supports `backdrop-filter`.
  </div>
</body>

</html>

在這個例子中，**supports-[display:grid]:grid** 類僅在瀏覽器支援 CSS 網格時才應用網格佈局，否則預設為 flexbox。

類似地，**supports-[backdrop-filter]:bg-black/25** 新增半透明背景，**supports-[backdrop-filter]:backdrop-blur-lg** 如果瀏覽器支援 **backdrop-filter** 屬性，則新增模糊效果。

您還可以配置 Tailwind CSS 配置檔案中的常用 **@supports** 規則快捷方式以簡化使用。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    supports: {
      grid: 'display: grid',
      'backdrop-filter': 'backdrop-filter: blur(5px)',
    },
  },
}

透過此配置，您可以在 HTML 中直接使用這些自定義修飾符。

<div class="supports-grid:grid">
  <!-- This div will use grid layout if the browser supports it -->
</div>

<div class="supports-backdrop-filter:bg-black/25 supports-backdrop-filter:backdrop-blur-lg">
  <!-- This div will apply backdrop blur if the browser supports backdrop-filter -->
</div>

您可以在您的專案中像這樣使用這些自定義 **supports-*** 修飾符

屬性選擇器

**Tailwind CSS** 中的 **屬性選擇器** 基於元素的屬性（例如 **data-*** 屬性或特定值）來設定元素樣式。我們將在下面瞭解如何有效地使用這些選擇器。

ARIA 狀態

在 **Tailwind CSS** 中，**ARIA 屬性** 用於使用 **aria-*** 修飾符設定元素樣式。ARIA（Accessible Rich Internet Applications）屬性提供有關元素的額外資訊，例如其狀態，這有助於您調整其外觀。

使用這些修飾符，您可以根據常見的布林型 ARIA 屬性（如 **aria-checked**、**aria-disabled** 和 **aria-expanded**）直接在 HTML 中應用樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <h3 class="underline font-bold mb-4">
       Buttons with `aria-disabled` set to true and false:
    </h3>
    <form class="space-y-4">
        <input type="text" aria-required="true" 
            class="border p-2 w-full" placeholder="Enter your name">
        
        <button aria-disabled="true" 
            class="bg-gray-500 text-white p-2 rounded cursor-not-allowed 
                aria-disabled:bg-slate-400">
                Submit (Disabled)
        </button>
         <button aria-disabled="false" 
            class="bg-slate-700 text-white p-2 rounded 
                aria-disabled:bg-gray-300">
                Submit (Enabled)
        </button>
    </form>
    <div aria-hidden="false" 
        class="mt-4 p-4 bg-yellow-200 aria-hidden:hidden">
            This message is visible when `aria-hidden` is false.
    </div>
</body>

</html>

在上例中，我們根據 **aria-disabled** 屬性的不同，對按鈕應用不同的樣式，顯示其啟用或停用狀態。此外，只有當 **aria-hidden** 設定為 **false** 時，才會顯示通知訊息。

預設情況下，Tailwind CSS 包含常用 ARIA 屬性的修飾符

修飾符	CSS
aria-busy	&[aria-busy="true"]
aria-checked	&[aria-checked="true"]
aria-disabled	&[aria-disabled="true"]
aria-expanded	&[aria-expanded="true"]
aria-hidden	&[aria-hidden="true"]
aria-pressed	&[aria-pressed="true"]
aria-readonly	&[aria-readonly="true"]
aria-required	&[aria-required="true"]
aria-selected	&[aria-selected="true"]

要建立您自己的 ARIA 屬性修飾符，您可以更新 **tailwind.config.js** 檔案。例如，如果您想為其他 ARIA 狀態新增樣式。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      aria: {
        'valid': 'valid="true"',
        'loading': 'loading="true"',
      },
    },
  },
}

當您需要應用唯一的 **ARIA 屬性** 或處理複雜的 ARIA 值時，您可以使用方括號直接建立 CSS 屬性。此方法使您能夠透過在 Tailwind 配置中傳遞預定義設定，直接在 HTML 中為特定屬性新增自定義樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
  <table class="min-w-full border border-gray-200">
      <tr>
        <th aria-sort="ascending" class="aria-[sort=ascending]:bg-yellow-300 
                       aria-[sort=descending]:bg-blue-300 p-2">
              Name
          <span class="aria-[sort=ascending]:inline 
                       aria-[sort=descending]:hidden">🔽</span>
          <span class="aria-[sort=ascending]:hidden 
                       aria-[sort=descending]:inline">🔼</span>
        </th>
      </tr> 
    <tr>
        <td>John Doe</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
    </tr> 
  </table>
</body>

</html>

並且 **ARIA 狀態** 修飾符也可以使用 **group-aria-*** 和 **peer-aria-*** 修飾符應用於父元素和兄弟元素。

<th aria-sort="ascending" class="group">
    <!-- Content -->
  <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180">
      <!-- SVG content -->
  </svg>
</th>

資料屬性

在 Tailwind CSS 中，**資料屬性** 用於使用 **data-*** 修飾符根據 **data-*** 屬性的值有條件地應用樣式。

預設情況下，Tailwind 支援自定義 **data-*** 屬性，允許您建立直接從 HTML 中響應這些屬性中設定的特定值的樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8 bg-gray-100">
    <div class="space-y-4">
     <!-- Tab with 'active' state -->
        <div data-tab="active" 
          class="data-[tab=active]:bg-blue-200 
              data-[tab=active]:text-blue-900 p-4 rounded-lg border 
              shadow-lg border-indigo-300">
          <h3 class="text-lg font-bold">Active Tab</h3>
          <p>With blue background and dark blue text.</p>
        </div>
        
         <!-- Tab with 'inactive' state -->
        <div data-tab="inactive" 
          class="data-[tab=inactive]:bg-gray-100 
              data-[tab=inactive]:text-gray-600 p-4 rounded-lg border 
              shadow-lg border-gray-300">
          <h3 class="text-lg font-bold">Inactive Tab</h3>
          <p>With white background and gray text.</p>
        </div>
    </div>
</body>

</html>

此示例演示瞭如何使用 **data-*** 屬性有條件地設定元素樣式。在這裡，樣式根據選項卡是“**active**”還是“**inactive**”而變化。您可以使用類似的技術和不同的 **data-*** 修飾符來建立各種動態設計。

您可以透過配置 **tailwind.config.js** 為常見的 data 屬性建立特定的快捷方式。這使您的 HTML 更易於閱讀和管理。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      data: {
        roleAdmin: 'role="admin"',
        roleUser: 'role="user"',
        roleGuest: 'role="guest"',
      },
    },
  },
}

現在您可以在您的專案設計中應用這些 **data-*** 修飾符。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-50">
    <!-- User profile with role="admin" -->
    <div data-role="admin" 
        class="p-4 border rounded shadow-md data-role-admin:bg-blue-200">
        <h2 class="text-2xl font-semibold text-blue-800">Admin Profile</h2>
        <p class="text-gray-800">You have administrative privileges.</p>
    </div>
    
    <!-- User profile with role="user" -->
    <div data-role="user" 
        class="p-4 border rounded shadow-md data-role-user:bg-green-200 mt-4">
        <h2 class="text-2xl font-semibold text-green-800">User Profile</h2>
        <p class="text-gray-800">You have regular user privileges.</p>
    </div>
    
    <!-- User profile with role="guest" -->
    <div data-role="guest" 
        class="p-4 border rounded shadow-md data-role-guest:bg-yellow-200 mt-4">
        <h2 class="text-2xl font-semibold text-yellow-800">Guest Profile</h2>
        <p class="text-gray-800">You have limited access.</p>
    </div>
</body>

</html>

在這個例子中，我們首先使用 **data-*** 屬性配置 Tailwind CSS，然後展示如何在 HTML 中使用這些屬性進行樣式設定。

RTL 支援

**Tailwind CSS** 提供 RTL 支援，用於管理具有 **從左到右** (LTR) 和 **從右到左** (RTL) 文字方向的網站上的樣式。**ltr** 和 **rtl** 修飾符允許您根據文字方向應用特定樣式。

這是一個關於如何使用這些修飾符來設定文字方向樣式的示例。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
  <!-- LTR Example -->
  <div class="p-4 bg-blue-200 ltr:ml-4 rtl:mr-4 mb-">
    <p>This is a left-to-right (LTR) text direction.</p>
  </div>

  <!-- RTL Example -->
  <div dir="rtl" class="p-4 bg-green-200 rtl:mr-7">
    <p>This is a right-to-left (RTL) text direction.</p>
  </div>
</body>

</html>

在這個例子中，我們應用了 **ltr:ml-3** 類，它在第一個容器中添加了 0.75 rem 的左外邊距，以及 **rtl:mr-3** 類，它在第二個容器中添加了 0.75 rem 的右外邊距。

請確保在您的 HTML 標籤上設定 **dir** 屬性為 **ltr**（從左到右）或 **rtl**（從右到左）。這有助於基於方向的樣式正確工作，尤其是在建立依賴於文字方向的佈局時。

示例

<!DOCTYPE html>
<html lang="en" dir="rtl">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8 bg-gray-100">
<div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">
        Heading Alignment Example
    </h2>
    <p class="text-gray-700 bg-yellow-200 p-4 rounded-lg">
        This text aligns to the right in 
        the right-to-left mode.
    </p>
</div>
</body>

</html>

**注意：** 只有當您的網站需要同時支援從左到右和從右到左的文字方向時，**ltr:** 和 **rtl:** 修飾符才有用。如果您的網站只針對一個方向，則不需要這些修飾符。只需使用適合您內容的樣式即可。

開啟/關閉狀態

**Tailwind CSS** 使用 **open:** 修飾符根據元素是開啟還是關閉來設定元素樣式，例如 **<details>** 和 **<dialog>**。這允許您在這些元素展開或摺疊時應用不同的樣式，從而更容易建立動態和響應式設計。

讓我們來看一個使用 **open:** 修飾符和 **<details>** 元素的簡單示例，以展示如何在開啟時對其進行不同的樣式設定。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-6">
  <div class="max-w-lg mx-auto p-6">
    <details class="open:bg-white open:ring-2 open:ring-blue-500 
                    open:shadow-lg p-6 rounded-lg">
      <summary class="text-lg font-semibold text-gray-800 
                      cursor-pointer select-none">
        What is Tailwind CSS?
      </summary>
      <div class="mt-4 text-gray-600">
        <p>Tailwind CSS is a utility-first CSS framework for 
            creating custom designs without having to leave 
            your HTML.
        </p>
      </div>
    </details>
  </div>
</body>

</html>

在上例中，我們設定了一個 **<details>** 元素的樣式，該元素在開啟時顯示其他資訊。**open:** 修飾符更改背景，新增環和陰影等等，使其成為一個可點選的標題，單擊時會顯示下面的內容。

自定義修飾符

Tailwind CSS 中的 **自定義修飾符** 允許您向實用程式類新增您自己的變體，讓您更好地控制樣式。我們將在下面向您展示如何有效地建立和使用這些 **自定義修飾符**。

在 Tailwind CSS 中使用任意變體

使用 **Tailwind CSS** 時，有時需要根據特定條件或預設變體未涵蓋的選擇器來設定元素樣式。Tailwind 透過一個稱為 **任意變體** 的功能來解決這個問題，該功能允許您直接在 HTML 中建立自定義修飾符。

這些任意變體是用 **方括號** (**[]**) 括起來的自定義選擇器，可以根據特定條件輕鬆應用樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="p-4 bg-gray-100">
    <table class="min-w-full mx-auto border border-gray-300 
                  shadow-xl text-xs">
        <thead>
            <tr class="bg-gray-200">
                <th class="p-2 text-left border-b border-gray-300">
                    Name
                </th>
                <th class="p-2 text-left border-b border-gray-300">
                    Age
                </th>
                <th class="p-2 text-left border-b border-gray-300">
                    Occupation
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="[&:nth-child(even)]:bg-blue-100">
                <td class="p-2 border-b border-gray-300">
                    John Doe
                </td>
                <td class="p-2 border-b border-gray-300">
                    30
                </td>
                <td class="p-2 border-b border-gray-300">
                    Software Engineer
                </td>
            </tr>
            <tr class="[&:nth-child(even)]:bg-blue-100">
                <td class="p-2 border-b border-gray-300">
                    Jane Smith
                </td>
                <td class="p-2 border-b border-gray-300">
                    25
                </td>
                <td class="p-2 border-b border-gray-300">
                    UI/UX Designer
                </td>
            </tr>
            <tr class="[&:nth-child(even)]:bg-blue-100">
                <td class="p-2 border-b border-gray-300">
                    Alice Johnson
                </td>
                <td class="p-2 border-b border-gray-300">
                    28
                </td>
                <td class="p-2 border-b border-gray-300">
                    Data Scientist
                </td>
            </tr>
            <tr class="[&:nth-child(even)]:bg-blue-100">
                <td class="p-2 border-b border-gray-300">
                    Michael Brown
                </td>
                <td class="p-2 border-b border-gray-300">
                    35
                </td>
                <td class="p-2 border-b border-gray-300">
                    Marketing Manager
                </td>
            </tr>
             <tr class="[&:nth-child(even)]:bg-blue-100">
                <td class="p-2 border-b border-gray-300">
                    Emily Davis
                </td>
                <td class="p-2 border-b border-gray-300">
                    32
                </td>
                <td class="p-2 border-b border-gray-300">
                    Product Manager
                </td>
            </tr> 
        </tbody>
    </table>
</body>

</html>

此示例演示瞭如何在 Tailwind CSS 中使用 **任意變體** 來設定表格中特定行的樣式。選擇器 **[:nth-child(even)]:bg-blue-100** 為每個 **偶數行** 應用背景顏色，展示瞭如何在 HTML 中輕鬆新增自定義樣式。

例如，如果您只想在大螢幕上並且僅當懸停在其上時才為列表中的第一個專案新增下劃線，並在懸停時更改第二個專案的背景顏色，則可以使用以下方法。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-6">
    <div class="max-w-2xl mx-auto">
        <ul role="list" class="space-y-4">
            <!--Applying underline on hover on large screens -->
            <li class="lg:[&:nth-child(1)]:hover:underline p-4
                       border border-gray-300 rounded-lg bg-white shadow-md">
                <span class="font-medium">
                    Finalize project proposal
                </span>
                <p class="text-sm text-gray-500">
                    Hover on large screens to see underline effect.
                </p>
            </li>

            <!--Applying background color on hover on small screens -->
            <li class="[&:nth-child(2)]:hover:bg-teal-100 p-4 
                       border border-gray-300 rounded-lg bg-white shadow-md">
                <span class="font-medium">
                    Review design mockups
                </span>
                <p class="text-sm text-gray-500">
                    Hover on small screens to see background color change.
                </p>
            </li>
        </ul>
    </div>
</body>

</html>

您甚至可以透過在類名中使用 **下劃線 (_) 來管理空格並設定巢狀元素的樣式。此技術允許您根據元素在容器中的位置應用樣式，即使它們是深度巢狀的。**

假設您想為特定容器內的所有 **<p>** 元素新增頂部邊距，包括巢狀在其他元素內部的元素。您可以使用以下程式碼實現此目的。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6 bg-gray-100">
    <div class="[&_p]:mt-4 bg-indigo-50 p-4 
                border border-indigo-300 rounded-lg shadow-md">
        <p>
            This paragraph will have a top margin.
        </p>
        <div>
            <p>
                This nested paragraph will also have a top margin.
            </p>
        </div>
    </div>
</body>

</html>

您還可以將任意變體與 CSS @規則（如 **@media** 或 **@supports**）一起使用，以增強樣式的靈活性。這允許您根據瀏覽器功能或視口大小直接在 HTML 中應用樣式。

以下是如何在 Tailwind CSS 中使用這些功能。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-6">
    <div class="p-4 bg-white shadow-lg">
        <p class="[@media(min-width:600px)]:text-lg 
                  [@supports(color:var(--fake-color))]:text-red-500 ">
            This text will be larger on screens wider than 600px.
        </p>
    </div>
</body>

</html>

在上例中，我們使用 Tailwind CSS 的任意變體直接在 HTML 中新增響應式和基於功能的樣式。類的 **@media(min-width:600px)** 部分使文字在寬度超過 600px 的螢幕上更大。

在 Tailwind CSS 中使用諸如 **@media** 或 **@supports** 之類的 @規則時，您不需要像在 CSS 預處理器中那樣為巢狀選擇器使用 & 佔位符。

您可以將 **@規則** 與 Tailwind 類組合使用。例如，要僅在瀏覽器支援的情況下更改按鈕的懸停不透明度，請使用

<button type="button" class="[@media(any-hover:hover){&:hover}]:opacity-100">
    <!-- Button content -->
</button>

在這種情況下，只有在瀏覽器支援懸停效果時，按鈕才會在懸停時變為完全不透明。

建立外掛

在 **Tailwind CSS** 中，您可以使用 **外掛** 新增自定義樣式選項和變體。**addVariant** 函式允許您建立新的樣式，例如 **third:** 用於設定列表中 **第三個專案** 的樣式。

讓我們建立一個 Tailwind CSS 外掛來新增自定義 **third:** 變體。此變體將設定元素的第三個子元素的樣式。以下是在您的 Tailwind 配置檔案中設定它的方法

首先，使用 addVariant 函式定義一個自定義外掛。在您的 Tailwind CSS 配置檔案 (**tailwind.config.js**) 中，新增以下程式碼。

示例

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ... other configurations
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('third', '&:nth-child(3)');
    }),
  ],
};

現在您可以在 CSS 類中使用 **third:** 變體。這是一個關於如何將其應用於列表項的示例。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>   
 
<body class="bg-gray-100 p-4">
    
  <ul class="list-disc pl-4">
    <li class="p-2">Design</li>
    <li class="p-2">Development</li>
    <li class="p-2 third:bg-yellow-200">Testing</li>
    <li class="p-2">Deployment</li>
  </ul> 
</body>

</html>

在這個例子中，**third:bg-yellow-200** 類為第三個列表項應用了黃色背景顏色。

高階主題

Tailwind CSS 中的 **高階主題** 涵蓋了該框架更復雜的功能，幫助您更好地理解其核心概念。我們將在下面將這些想法分解成簡單易懂的解釋。

與您自己的類一起使用

在 **Tailwind CSS** 中，您可以將所有可用的 **修飾符** 應用於您自己的 **自定義類**，前提是這些類在 Tailwind 的 **層** 中定義或透過 **外掛** 新增。這意味著您可以輕鬆地將 Tailwind 的樣式功能應用於您的自定義樣式。

讓我們建立一個自定義類，根據不同的狀態和螢幕尺寸調整其陰影和背景顏色。

使用 Tailwind 的**@layer utilities 指令**在你的 CSS 檔案中新增你的自定義樣式。

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .box-shadow-custom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

現在在你的 HTML 中使用你的自定義類和 Tailwind 修飾符來根據不同的條件改變它的外觀。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>   
 
<body class="bg-gray-100 p-4">
 
  <div class="p-6 bg-white rounded-lg box-shadow-custom 
              hover:bg-blue-100 md:box-shadow-2xl transition-all 
              duration-300">
        <h1 class="text-xl font-bold">Interactive Box Shadow</h1>
        <p>This container features a custom box shadow. 
            It changes background color on hover and expands 
            the shadow on medium-sized screens and larger.
        </p>
  </div>
</body>

</html>

此示例顯示一個容器，具有自定義陰影，懸停時背景顏色會改變，在大螢幕上陰影更大，並具有平滑的過渡效果。

堆疊修飾符的順序

在**Tailwind CSS**中，你可以組合**多個實用程式修飾符**來建立複雜的樣式。**堆疊修飾符**根據不同的狀態或條件應用不同的樣式，它們的順序會影響最終外觀。

**修飾符**的應用順序是從內到外，類似於巢狀函式呼叫，這意味著你使用的順序會影響它們對元素的樣式設定。例如，將**hover:**與**focus:**或**dark:**與**group-hover:**組合可以建立響應不同互動或主題的樣式。

讓我們看看如何使用不同的修飾符順序來設定按鈕的樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>   
 
<body class="bg-gray-100 p-4">  
    <div class="space-y-4">
        <!-- Button with dark mode styles and hover effect -->
        <button class="bg-gray-200 dark:bg-gray-800 text-black p-3 
                      rounded-md dark:text-white hover:bg-gray-600 
                      dark:hover:bg-gray-700">
                Dark Mode and Hover
        </button>
        
        <!-- Button with hover styles and dark mode effect -->
        <button class="bg-gray-200 text-black p-3 rounded-md
                      hover:bg-gray-600 dark:bg-gray-800 dark:text-white 
                      dark:hover:bg-gray-700">
              Hover and Dark Mode
        </button>
      </div> 
</body>

</html>

此示例顯示**Tailwind CSS 修飾符**的順序如何改變按鈕樣式。第一個按鈕在懸停效果之前應用**暗模式**樣式，而第二個按鈕在暗模式樣式之前應用**懸停效果**。

修飾符順序的實際應用

在大多數情況下，修飾符的順序不會有太大區別，但在某些情況下會產生影響。

示例 (dark:group-hover:opacity-10)

/* dark:group-hover:opacity-100 */
.dark .group:hover .dark\:group-hover\:opacity-100 {
  opacity: 1;
}

在這個例子中，**.dark** 類必須是**.group**類的父類。這種安排意味著暗模式樣式應用於父容器，而 group-hover 樣式在懸停該容器時觸發。

示例 (group-hover:dark:opacity-100)

/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover\:dark\:opacity-100 {
  opacity: 1;
}

在這裡，**.dark** 類應該在**.group**類內部。此設定確保**懸停效果**應用於**.group**內的元素，暗模式樣式取決於懸停狀態。

示例 (prose-headings:hover:underline)

/* prose-headings:hover:underline */
.prose-headings\:hover\:underline:hover :is(:where(h1, h2, h3, h4, th)) {
  text-decoration: underline;
}

此示例在將滑鼠懸停在文章容器上時，會為所有標題新增下劃線。**懸停效果**應用於容器，影響其中的所有標題。

示例 (hover:prose-headings:underline)

/* hover:prose-headings:underline */
.hover\:prose-headings\:underline :is(:where(h1, h2, h3, h4, th)):hover {
  text-decoration: underline;
}

在這種情況下，只有在直接將滑鼠懸停在標題本身上時才會應用下劃線。**懸停效果**單獨針對標題，而不是容器。

快速參考：Tailwind 修飾符

此表提供了**Tailwind CSS**中所有**內建修飾符**的快速簡便參考。它是快速識別正確修飾符的首選資源。

修飾符	CSS
hover	&:hover
focus	&:focus
focus-within	&:focus-within
focus-visible	&:focus-visible
active	&:active
visited	&:visited
target	&:target
*	& > *
has	&:has
first	&:first-child
last	&:last-child
only	&:only-child
odd	&:nth-child(odd)
even	&:nth-child(even)
first-of-type	&:first-of-type
last-of-type	&:last-of-type
only-of-type	&:only-of-type
empty	&:empty
disabled	&:hover
enabled	&:enabled
checked	&:checked
indeterminate	&:indeterminate
default	&:default
required	&:required
valid	&:valid
invalid	&:invalid
in-range	&:in-range
out-of-range	&:out-of-range
placeholder-shown	&:placeholder-shown
autofill	&:autofill
read-only	&:read-only
before	&::before
after	&::after
first-letter	&::first-letter
first-line	&::first-line
marker	&::marker
selection	&::selection
file	&::file-selector-button
backdrop	&::backdrop
placeholder	&::placeholder
sm	@media (min-width: 640px)
md	@media (min-width: 768px)
lg	@media (min-width: 1024px)
xl	@media (min-width: 1280px)
2xl	@media (min-width: 1536px)
min-[…]	@media (min-width: …)
max-sm	@media not all and (min-width: 640px)
max-md	@media not all and (min-width: 768px)
max-lg	@media not all and (min-width: 1024px)
max-xl	@media not all and (min-width: 1280px)
max-2xl	@media not all and (min-width: 1536px)
max-[…]	@media (max-width: …)
dark	@media (prefers-color-scheme: dark)
portrait	@media (orientation: portrait)
landscape	@media (orientation: landscape)
motion-safe	@media (prefers-reduced-motion: no-preference)
motion-reduce	@media (prefers-reduced-motion: reduce)
contrast-more	@media (prefers-contrast: more)
contrast-less	@media (prefers-contrast: less)
print	@media print
supports-[…]	@supports (…)
aria-checked	&[aria-checked=“true”]
aria-disabled	&[aria-disabled=“true”]
aria-expanded	&[aria-expanded=“true”]
aria-hidden	&[aria-hidden=“true”]
aria-pressed	&[aria-pressed=“true”]
aria-readonly	&[aria-readonly=“true”]
aria-required	&[aria-required=“true”]
aria-selected	&[aria-selected=“true”]
aria-[…]	&[aria-…]
data-[…]	&[data-…]
rtl	[dir=“rtl”] &
ltr	[dir=“ltr”] &
open	&[open]

Tailwind CSS 偽類參考

Tailwind CSS 包含各種**偽類**，可幫助你根據使用者與它們互動的方式應用樣式。這些**偽類**使你的設計更具互動性和響應性。以下是一些常用**偽類**及其使用方法的簡要指南，以改進你的設計。

Hover (:hover)

**hover**偽類在使用者將滑鼠懸停在其上時會更改元素的樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <button class="bg-teal-700 text-white py-2 
                   px-4 rounded hover:bg-teal-300">
        Hover Over Me
    </button>
</body>

</html>

在此示例中，按鈕在懸停時會將其背景顏色從深青色更改為淺青色。

Focus (:focus)

**focus**偽類在元素獲得焦點時（例如，使用者單擊表單欄位時）對其進行樣式設定。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <input class="border-gray-300 p-2 rounded focus:border-green-600 
                focus:ring-2 focus:ring-green-400" placeholder="Focus on me"> 
</body>

</html>

在此示例中，輸入欄位的邊框和環顏色在獲得焦點時會變成綠色。

Focus Within (:focus-within)

**focus-within**偽類在其自身或其任何子元素獲得焦點時，會將樣式應用於父元素。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="p-4 border border-gray-300 rounded 
                focus-within:border-blue-500">
      <input type="text" class="p-2 border border-gray-300 rounded" 
             placeholder="Click inside me">
    </div>
</body>

</html>

在此示例中，當其中的輸入欄位獲得焦點時，**<div>**的邊框會變為藍色。

Focus Visible (:focus-visible)

**focus-visible**偽類在使用鍵盤導航或其他非滑鼠輸入進行聚焦時，會為元素設定樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <button class="focus:outline-none focus-visible:ring 
                   focus-visible:ring-blue-800 py-2 px-4 rounded border 
                   bg-blue-400 text-white focus:ring focus:ring-blue-800">
            Keyboard Focus
      </button>
</body>

</html>

在此示例中，當使用鍵盤導航聚焦按鈕時，按鈕周圍會出現一個環。

Active (:active)

**active**偽類在按下或單擊元素時會將其樣式應用於該元素。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="p-4">
  <button class="bg-teal-500 text-white py-2 px-4 
                 rounded active:bg-teal-700">
          Press Me
  </button>
</body>

</html>

在此示例中，按鈕的背景顏色在按下時會變為更深的藍色。

Visited(:visited)

Tailwind CSS 中的**visited**偽類可以設定使用者已訪問的連結的樣式。你可以更改它們的外觀，例如顏色，以幫助使用者識別先前點選的連結。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <a href="https://tutorialspoint.tw" class="text-blue-600 
             visited:text-purple-600">
          Visit Website
    </a>
</body>

</html>

在此示例中，連結文字顏色在訪問連結後會從藍色更改為紫色。

Target (:target)

如果元素的 ID 與 URL 中**#**符號後的部分匹配，則**target**偽類會為該元素設定樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <a href="#section1" class="text-blue-600">
        Go to Section 1
    </a><hr>
    <a href="#section2" class="text-blue-600">
        Go to Section 2
    </a>
    <div id="section1" class="mt-4 p-4 border border-gray-300 
                              target:bg-yellow-100">
        <h2>Section 1</h2>
        <p>This is the first section.</p>
    </div>
    <div id="section2" class="mt-6 p-4 border border-gray-300 
                              target:bg-yellow-100">
        <h2>Section 2</h2>
        <p>This is the second section.</p>
    </div>
</body>

</html>

在此示例中，當 URL 片段與該部分的 ID 匹配時，該部分的背景顏色會變為黃色。

First (:first-child)

Tailwind CSS 中的**first-child**偽類將目標設定為父元素的第一個子元素，以進行自定義樣式設定。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
 
  <ul class="list-disc pl-5">
      <li class="py-2 first:font-bold first:text-teal-500">
          Machine Learning
      </li>
      <li class="py-2">Web Development</li>
      <li class="py-2">Artificial Intelligence</li>
  </ul> 
</body>

</html>

在上例中，第一個列表項的樣式為粗體文字和青色文字。

Last (:last-child)

**last-child**偽類將樣式應用於其父元素的最後一個子元素。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
  <ul class="list-disc pl-5">
      <li class="py-2">Machine Learning</li>
      <li class="py-2">Web Development</li>
      <li class="py-2 last:bg-gray-200 last:text-indigo-600">
          Artificial intelligence
      </li>
  </ul> 
</body>

</html>

在此示例中，最後一個列表項與其他列表項相比具有不同的背景顏色和文字顏色。

Only (:only-child)

如果元素是其父元素內的唯一子元素，則**only-child**偽類會應用樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-50">
    <ul class="list-disc p-4 bg-cyan-100">
        <li class="py-4 only:py-0">
            Only item in the list
        </li>
        <!-- Add more <li> elements here to see the effect-->
    </ul> 
</body>

</html>

在此示例中，如果列表中的**<li>**是唯一子元素，則會獲得特殊的填充。

Odd (:nth-child(odd))

**odd**偽類將樣式應用於在其同級元素中位於**奇數位置**的元素。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <table class="w-full border-collapse">
        <thead>
            <tr>
                <th class="border px-2 py-2 text-sm">
                    Name
                </th>
                <th class="border px-2 py-2 text-sm">
                    Email
                </th>
                <th class="border px-2 py-2 text-sm">
                    Role
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white odd:bg-indigo-100">
                <td class="border px-2 py-2 text-sm">
                    Alice Johnson
                </td>
                <td class="border px-2 py-2 text-sm">
                    alice@example.com
                </td>
                <td class="border px-2 py-2 text-sm">
                    Developer
                </td>
              </tr>
              <tr class="bg-white odd:bg-indigo-100">
                <td class="border px-2 py-2 text-sm">
                    Bob Smith
                </td>
                <td class="border px-2 py-2 text-sm">
                    bob@example.com
                </td>
                <td class="border px-2 py-2 text-sm">
                    Designer
                </td>
              </tr>
              <tr class="bg-white odd:bg-indigo-100">
                <td class="border px-2 py-2 text-sm">
                    Charlie Davis
                </td>
                <td class="border px-2 py-2 text-sm">
                    charlie@example.com
                </td>
                <td class="border px-2 py-2 text-sm">
                    Product Manager
                </td>
            </tr>
        </tbody>
    </table>  
</body>

</html>

在此示例中，表格中的每個**奇數行**都具有淺靛藍色背景。

Even (:nth-child(even))

**even**偽類將樣式應用於在其同級元素中位於**偶數位置**的元素。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <table class="w-full border-collapse">
        <thead>
            <tr>
                <th class="border px-2 py-2 text-sm">
                    Task
                </th>
                <th class="border px-2 py-2 text-sm">
                    Assigned To
                </th>
                <th class="border px-2 py-2 text-sm">
                    Due Date
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white even:bg-teal-100">
                <td class="border px-2 py-2 text-sm">
                    Update website
                </td>
                <td class="border px-2 py-2 text-sm">
                    John Doe
                </td>
                <td class="border px-2 py-2 text-sm">
                    2024-09-15
                </td>
              </tr>
              <tr class="bg-white even:bg-teal-100">
                <td class="border px-2 py-2 text-sm">
                    Design new logo
                </td>
                <td class="border px-2 py-2 text-sm">
                    Jane Smith
                </td>
                <td class="border px-2 py-2 text-sm">
                    2024-09-20
                </td>
              </tr>
              <tr class="bg-white even:bg-teal-100">
                <td class="border px-2 py-2 text-sm">
                    Prepare presentation
                </td>
                <td class="border px-2 py-2 text-sm">
                    Alice Johnson
                </td>
                <td class="border px-2 py-2 text-sm">
                    2024-09-25
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在此示例中，我們使用淺青色背景對**偶數行**進行了樣式設定。

First-Of-Type (:first-of-type)

**first-of-type**偽類將樣式應用於其父元素內其型別的**第一個元素**。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <form class="max-w-lg mx-auto p-6 bg-white shadow-md rounded">
      <label for="name" class="block text-gray-700">
          Name
      </label>
      <input type="text" id="name" class="block w-full p-2 border 
              border-gray-300 rounded mb-4 first-of-type:border-blue-500" 
                  placeholder="Enter your name">

      <label for="email" class="block text-gray-700">
          Email
      </label>
      <input type="email" id="email" class="block w-full p-2 border 
              border-gray-300 rounded mb-4" placeholder="Enter your email">

      <label for="message" class="block text-gray-700">
          Message
      </label>
      <textarea id="message" class="block w-full p-2 border 
          border-gray-300 rounded" 
          placeholder="Enter your message"></textarea>

      <button type="submit" class="bg-blue-500 text-white p-2 rounded mt-4">
          Submit
      </button>
  </form>
 </body>

</html>

在此示例中，我們將**first-of-type**偽類應用於第一個輸入元素，使其與表單中的其他欄位有所不同。

Last-Of-Type (:last-of-type)

**last-of-type**偽類將樣式應用於其父元素內其型別的**最後一個元素**。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="max-w-lg mx-auto bg-white shadow-md rounded">
        <h2 class="text-xl font-bold mb-4">Comments</h2>
        <div class="border-t border-gray-300 pt-4">
            <div class="py-2 border-b border-gray-200">
                Comment by Jane: Great post!
            </div>
            <div class="py-2 border-b border-gray-200">
                Comment by John: Very informative.
            </div>
            <div class="py-2 border-b border-gray-200 
                        last-of-type:bg-blue-50">
                Comment by Alex: Thanks for the tips!
            </div>
        </div>
    </div>
</body>

</html>

在此示例中，我們在列表中應用了**last-of-type**以獲得不同的背景顏色來突出顯示它。

Only-Of-Type (:only-of-type)

如果元素是其父元素內唯一型別的元素，則**only-of-type**偽類會應用樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-200">
    <form class="max-w-lg p-4 mx-auto bg-white shadow-md rounded">
        <label for="contact-info" class="block text-gray-700">
            Contact Info
        </label>
        <input type="text" id="contact-info" 
            class="block w-full p-2 border border-gray-300 rounded 
                    mb-4 only-of-type:bg-yellow-50" 
                placeholder="Enter your contact information">

        <button type="submit" 
                class="bg-blue-500 text-white p-2 rounded mt-4">
            Submit
        </button>
    </form> 
</body>

</html>

在此示例中，如果表單中只有一個<input>欄位，則它將獲得黃色背景以使其脫穎而出。

Empty (:empty)

如果元素沒有子元素或文字，則**empty**偽類會應用樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-200">
    <ul class="list-disc pl-5">
        <li class="empty:hidden">No Items Here</li>
        <li class="empty:hidden">Another Empty Item</li>
        <li class="empty:hidden">Another Item</li>
    </ul> 
</body>

</html>

在此示例中，如果列表項為空，則它將被隱藏。

Disabled (:disabled)

**disabled**偽類可以設定已停用的元素的樣式，從而影響它們的外觀以指示它們無法互動。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <div class="p-4">
        <input type="text" class="disabled:opacity-100 
            p-2 border border-gray-300 rounded" 
            placeholder="Disabled input" disabled>
    </div>
</body>

</html>

在此示例中，停用輸入欄位時，由於**disabled:opacity-50**類，它會顯得褪色。

Enabled (:enabled)

:enabled偽類選擇器用於選擇啟用的元素，允許在元素處於活動和互動狀態時更改樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <div class="p-4">
        <input type="text" class="enabled:border-blue-700 p-2 
                                  border rounded" placeholder="Type here">
    </div> 
</body>

</html>

在這個例子中，輸入欄位在啟用時邊框會變成藍色。

已選中 (:checked)

:checked偽類選擇器將樣式應用於已選中或勾選的複選框或單選按鈕。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="p-4">
        <label>
            <input type="checkbox" class="appearance-none 
                  checked:bg-blue-500 h-5 w-5 border border-gray-400 rounded">
            <span class="ml-2">Checked box</span>
        </label>
    </div> 
</body>

</html>

在這個例子中，複選框在選中時背景顏色會發生變化。

不確定狀態 (:indeterminate)

:indeterminate偽類選擇器用於為處於不確定狀態的複選框或單選按鈕設定樣式，通常是在既未選中也未取消選中時。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="p-4">
        <label class="inline-flex items-center">
            <input type="checkbox" class="appearance-none 
                  indeterminate:bg-gray-300 h-5 w-5 border 
                  border-gray-300 rounded">
            <span class="ml-2">Indeterminate box</span>
        </label>
    </div>
</body>

</html>

在這個例子中，複選框在不確定狀態下背景為灰色。

預設值 (:default)

:default偽類選擇器用於選擇頁面初始載入時具有預設值的元素，這對於預選選項很有用。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <div class="p-4">
        <label class="inline-flex items-center">
            <input type="checkbox" class="default:ring-2 h-5 w-5 border 
                                          border-gray-300 rounded" checked>
            <span class="ml-2">Default box</span>
        </label>
    </div>
</body>

</html>

在這個例子中，如果複選框是預設值，則會有一個圓環。

必填 (:required)

:required偽類選擇器將樣式應用於標記為必填的表單輸入，表示必須填寫這些輸入。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="p-4">
        <input type="text" required class="required:border-red-500 p-2
            border border-gray-300 rounded" placeholder="Required field">
    </div> 
</body>

</html>

在這個例子中，如果輸入欄位是必填的，則其邊框將變成紅色。

有效 (:valid)

:valid偽類選擇器在輸入元素的值滿足指定的有效性條件時設定其樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="bg-gray-200 p-4">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">
            Phone Number Validation
        </h2>
        <form>
            <label for="phone" class="block text-gray-700 text-sm font-bold mb-2">
                Phone Number:
            </label>
            <input
              type="tel"
              id="phone"
              class="block w-full p-3 border border-gray-300 rounded-md 
                  focus:outline-none focus:border-blue-500 invalid:border-red-500 
                  valid:border-green-500"
              placeholder="123-456-7890"
              pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
              required
            />
                Please enter a phone number in the format: 123-456-7890.
        </form>
    </div> 
</body>

</html>

在這個例子中，我們使用valid:border-green-500、invalid:border-red-500和focus:border-blue-500類來根據輸入欄位的有效性和焦點狀態設定不同的邊框顏色。

無效 (:invalid)

:invalid偽類選擇器在輸入元素的值不滿足指定的有效性條件時設定其樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="bg-gray-200 p-4">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">
            Invalid (:invalid) Styling
        </h2>
        <form>
            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
                Email:
            </label>
              <input
                  type="email"
                  id="email"
                  class="block w-full p-3 border border-gray-300 rounded-md 
                  focus:outline-none focus:border-blue-500 invalid:border-red-500"
                  placeholder="you@example.com" required
              />
            <p class="text-red-500 text-sm mt-2 hidden invalid:block">
              Please enter a valid email address.
            </p>
        </form>
    </div> 
</body>

</html>

在這個例子中，我們使用invalid:border-red-500類，當電子郵件地址無效時，輸入欄位邊框將變成紅色。

在範圍內 (:in-range)

:in-range偽類選擇器在輸入元素的值在指定範圍內時設定其樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div>
        <input type="number" min="1" max="10" 
            class="in-range:border-green-500 p-2 border 
                border-gray-300 rounded" placeholder="1-10">
    </div> 
</body>

</html>

在這個例子中，我們使用in-range類，如果值在1到10的範圍內，則輸入邊框將變成綠色。

超出範圍 (:out-of-range)

:out-of-range偽類選擇器在輸入元素的值超出指定範圍時設定其樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="p-4">
        <input type="number" min="1" max="10" 
            class="out-of-range:ring-8 out-of-range:ring-red-500 p-2 border
                border-gray-300 rounded" placeholder="1-10">
    </div> 
</body>

</html>

在這個例子中，我們使用:out-of-range設定輸入欄位的樣式，以便在輸入1到10範圍之外的數字時顯示紅色圓環。

顯示佔位符 (:placeholder-shown)

:placeholder-shown偽類選擇器在佔位符文字可見時將樣式應用於輸入元素。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <div class="p-4">
        <input type="text" class="placeholder-shown:border-gray-500 
                                  placeholder-shown:bg-cyan-50 p-2 border rounded" 
                                  placeholder="Enter text here">
    </div> 
</body>

</html>

在這個例子中，我們使用:placeholder-shown設定文字輸入欄位的樣式，以便在佔位符文字可見時具有灰色邊框和青色背景。

自動填充 (:autofill)

:autofill偽類選擇器在瀏覽器自動填充其值時設定輸入元素的樣式。

示例

<!DOCTYPE html>
<html lang="en">  
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head> 

<body class="bg-gray-100 p-4">   
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">Autofill Styling</h2>
        <form>
            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
                Email:
            </label>
            <input
                type="email"
                id="email"
                class="autofill:bg-yellow-200 block w-full p-3 border 
                    border-gray-300 rounded-md focus:outline-none 
                    focus:border-blue-500 placeholder-gray-400 "
                    placeholder="you@example.com"
                  required
            />
        </form>
    </div>
</body>

</html>

在這個例子中，我們使用autofill:bg-yellow-200類，當瀏覽器自動填充電子郵件地址時，輸入欄位將顯示黃色背景。

只讀 (:read-only)

:read-only偽類選擇器將樣式應用於設定為只讀的輸入元素，這意味著使用者無法修改它。

示例

<!DOCTYPE html>
<html lang="en">  
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <div class="p-4">
        <input type="text" class="read-only:bg-gray-100 p-2 border 
                                  border-gray-300 rounded" 
               value="Read-only text" readonly>
    </div> 
</body>

</html>

在這個例子中，我們使用read-only:bg-gray-100類，當輸入欄位為只讀時，其背景將顯示灰色。

列印頁面