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.com" 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="[email protected]" />
    </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.com" 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">
                    [email protected]
                </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">
                    [email protected]
                </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">
                    [email protected]
                </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="[email protected]" 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="[email protected]"
                  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类，当输入字段为只读时，其背景将显示灰色。

打印页面