HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

Tailwind CSS 教程

Tailwind CSS 首页 Tailwind CSS 路线图 Tailwind CSS 简介 Tailwind CSS 安装和环境配置 Tailwind CSS 编辑器设置

Tailwind CSS 核心概念

Tailwind CSS 实用至上基础 Tailwind CSS 悬停、聚焦及其他状态 Tailwind CSS 响应式设计 Tailwind CSS 暗黑模式 Tailwind CSS 样式复用 Tailwind CSS 添加自定义样式 Tailwind CSS 函数和指令

Tailwind CSS 自定义

Tailwind CSS 配置 Tailwind CSS 内容配置 Tailwind CSS 主题配置 Tailwind CSS 自定义屏幕 Tailwind CSS 自定义颜色 Tailwind CSS 自定义间距 Tailwind CSS 插件 Tailwind CSS 预设

Tailwind CSS 基本样式

Tailwind CSS 预检

Tailwind CSS 布局

Tailwind CSS 宽高比 Tailwind CSS 容器 Tailwind CSS 列 Tailwind CSS 后断行 Tailwind CSS 前断行 Tailwind CSS 内断行 Tailwind CSS 盒子装饰断行 Tailwind CSS 盒子大小 Tailwind CSS 显示 Tailwind CSS 浮动 Tailwind CSS 清除 Tailwind CSS 堆叠 Tailwind CSS 对象适配 Tailwind CSS 对象位置 Tailwind CSS 溢出 Tailwind CSS 滚动行为 Tailwind CSS 位置 Tailwind CSS 顶部 / 右侧 / 底部 / 左侧 Tailwind CSS 可见性 Tailwind CSS Z-Index

Tailwind CSS 弹性盒和网格

Tailwind CSS 弹性基础 Tailwind CSS 弹性方向 Tailwind CSS 弹性包裹 Tailwind CSS 弹性 Tailwind CSS 弹性增长 Tailwind CSS Flex Shrink Tailwind CSS 顺序 Tailwind CSS 网格模板列 Tailwind CSS 网格列起始/结束 Tailwind CSS 网格模板行 Tailwind CSS 网格行起始/结束 Tailwind CSS 网格自动排版 Tailwind CSS 网格自动列 Tailwind CSS 网格自动行 Tailwind CSS 间隙 Tailwind CSS 内容对齐 Tailwind CSS 项目对齐 Tailwind CSS 自身对齐 Tailwind CSS 内容对齐 Tailwind CSS 项目对齐 Tailwind CSS 自身对齐 Tailwind CSS 放置内容 Tailwind CSS 放置项目 Tailwind CSS 放置自身

Tailwind CSS 间距

Tailwind CSS 内边距 Tailwind CSS 边距 Tailwind CSS 间距

Tailwind CSS 尺寸

Tailwind CSS 宽度 Tailwind CSS 最小宽度 Tailwind CSS 最大宽度 Tailwind CSS 高度 Tailwind CSS 最小高度 Tailwind CSS 最大高度 Tailwind CSS 尺寸

Tailwind CSS 字体排版

Tailwind CSS 字体系列 Tailwind CSS 字体大小 Tailwind CSS 字体平滑 Tailwind CSS 字体样式 Tailwind CSS 字体粗细 Tailwind CSS 字体变体数字 Tailwind CSS 字母间距 Tailwind CSS 行距限制 Tailwind CSS 行高 Tailwind CSS 列表样式图片 Tailwind CSS 列表样式位置 Tailwind CSS 列表样式类型 Tailwind CSS 文本对齐 Tailwind CSS 文本颜色 Tailwind CSS 文本装饰 Tailwind CSS 文本装饰颜色 Tailwind CSS 文本装饰样式 Tailwind CSS 文本装饰粗细 Tailwind CSS 文本下划线偏移 Tailwind CSS 文本变换 Tailwind CSS 文本溢出 Tailwind CSS 文本换行 Tailwind CSS 文本缩进 Tailwind CSS 垂直对齐 Tailwind CSS 空格 Tailwind CSS 单词换行 Tailwind CSS 连字符 Tailwind CSS -内容

Tailwind CSS 背景

Tailwind CSS 背景附件 Tailwind CSS 背景剪辑 Tailwind CSS 背景颜色 Tailwind CSS 背景原点 Tailwind CSS 背景位置 Tailwind CSS 背景重复 Tailwind CSS 背景大小 Tailwind CSS 背景图片 Tailwind CSS 渐变色标

Tailwind CSS 边框

Tailwind CSS 边框半径 Tailwind CSS 边框宽度 Tailwind CSS 边框颜色 Tailwind CSS 边框样式 Tailwind CSS 分隔宽度 Tailwind CSS 分割颜色 Tailwind CSS 分割样式 Tailwind CSS 轮廓宽度 Tailwind CSS 轮廓颜色 Tailwind CSS 轮廓样式 Tailwind CSS 轮廓偏移 Tailwind CSS 环宽度 Tailwind CSS 环颜色 Tailwind CSS 环偏移宽度 Tailwind CSS 环偏移颜色

Tailwind CSS 效果

Tailwind CSS 框阴影 Tailwind CSS 框阴影颜色 Tailwind CSS 不透明度 Tailwind CSS 混合模式 Tailwind CSS 背景混合模式

Tailwind CSS 滤镜

Tailwind CSS 模糊 Tailwind CSS 亮度 Tailwind CSS 对比度 Tailwind CSS 阴影 Tailwind CSS 灰度 Tailwind CSS 色相旋转 Tailwind CSS 反转 Tailwind CSS 饱和度 Tailwind CSS 棕褐色 Tailwind CSS 背景模糊 Tailwind CSS 背景亮度 Tailwind CSS 背景对比度 Tailwind CSS 背景灰度 Tailwind CSS 背景色相旋转 Tailwind CSS 背景反转 Tailwind CSS 背景不透明度 Tailwind CSS 背景饱和度 Tailwind CSS 背景棕褐色

Tailwind CSS 表格

Tailwind CSS 边框折叠 Tailwind CSS 边框间距 Tailwind CSS 表格布局 Tailwind CSS 侧边标题

Tailwind CSS 过渡和动画

Tailwind CSS 过渡属性 Tailwind CSS 过渡持续时间 Tailwind CSS 过渡计时函数 Tailwind CSS 过渡延迟 Tailwind CSS 动画

Tailwind CSS 变换

Tailwind CSS 缩放 Tailwind CSS 旋转 Tailwind CSS 平移 Tailwind CSS 倾斜 Tailwind CSS 变换原点

Tailwind CSS 交互性

Tailwind CSS 强调色 Tailwind CSS 外观 Tailwind CSS 光标 Tailwind CSS 插入符号颜色 Tailwind CSS 指针事件 Tailwind CSS 调整大小 Tailwind CSS 滚动行为 Tailwind CSS 滚动边距 Tailwind CSS 滚动内边距 Tailwind CSS 滚动捕捉对齐 Tailwind CSS 滚动捕捉停止 Tailwind CSS 滚动捕捉类型 Tailwind CSS 触摸操作 Tailwind CSS 用户选择 Tailwind CSS 即将变更

Tailwind CSS SVG

Tailwind CSS 填充 Tailwind CSS 描边 Tailwind CSS 描边宽度

Tailwind CSS 可访问性

Tailwind CSS 屏幕阅读器 Tailwind CSS 强制颜色调整

Tailwind CSS 额外内容

Tailwind CSS 与预处理器配合使用 Tailwind CSS 生产环境优化

Tailwind CSS 参考

Tailwind CSS 核心概念 Tailwind CSS 自定义 Tailwind CSS 布局 Tailwind CSS 弹性框和网格 Tailwind CSS 间距 Tailwind CSS 大小 Tailwind CSS 排版 Tailwind CSS 背景 Tailwind CSS 边框 Tailwind CSS 效果 Tailwind CSS 滤镜 Tailwind CSS 表格 Tailwind CSS 过渡和动画 Tailwind CSS 变换 Tailwind CSS 交互性

Tailwind CSS 资源

Tailwind CSS 讨论 Tailwind CSS 实用资源

❮ ❯

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/{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 类应用样式，并相应地更新标签和消息。

注意: 每个同级元素的名称都直接在 HTML 中定义。Tailwind 会自动处理必要的 CSS，因此无需额外配置。

任意同级元素

您可以创建自定义 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>

在此示例中，<div> 仅当 <input> 是其父元素的第三个子元素时才会出现。peer-[:nth-of-type(3)_&]:block 类使用 & 将 .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://www.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-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 类根据对等元素的状态，使消息仅在单选按钮被选中时可见。

伪元素

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 中，您可以使用 ma​​rker 修饰符为列表中的标记或项目符号添加样式。您可以通过调整颜色、大小和其他样式来修改列表项标记(例如项目符号或数字)的外观。

这里有一个简单的示例，展示如何使用 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>

此示例展示了一个带有紫色标记 (ma​​rker:text-purple-600) 和较大标记文本 (ma​​rker:text-lg) 的待办事项列表样式，并且每个项目都以空格分隔。它展示了如何使用 Tailwind CSS 设置列表标记的样式。

此外，marker 修饰符可以应用于父元素，因此您可以为所有列表项设置一致的样式，而无需为每个项目重复设置样式。

突出显示文本

在 Tailwind CSS 中，您可以使用 selection 修饰符设置用户所选文本的样式，该修饰符可以更改所选文本的背景和文本颜色。通过应用 selection:bg-{color} 和 selection:text-{color} 等实用程序，您可以控制突出显示文本的显示方式，确保其与整体设计保持一致。

让我们设置样式，看看如何使用 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-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>

First-line 和 first-letter

在 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>

在上面的示例中，我们应用了 Tailwind 的一些实用工具，例如 first-line:font-semibold 和 first-letter:text-5xl，将文本的第一行设置为粗体绿色，并将第一个字母设置为大号红色粗体。

对话框背景

在 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 使用此功能帮助您创建可自动根据用户主题偏好进行调整的设计。

通过使用亮色模式的默认实用程序，并应用暗色修饰符覆盖暗色模式的样式，您可以确保您的网站在两种模式下都保持可读性。

让我们看一个简单的示例，了解如何在亮色和暗色模式下应用 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。/p>

示例

<!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 部分在屏幕上可见，但在打印时隐藏，而隐藏的 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。

类似地，如果浏览器支持 backdrop-filter 属性，则 supports-[backdrop-filter]:bg-black/25 添加半透明背景，supports-[backdrop-filter]:backdrop-blur-lg 添加模糊效果。

您还可以在 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">
<!-- 如果浏览器支持网格布局，此 div 将使用网格布局 ->
</div>

<div class="supports-backdrop-filter:bg-black/25 support-backdrop-filter:backdrop-blur-lg">
<!-- 如果浏览器支持 backdrop-filter，此 div 将应用背景模糊效果 ->
</div>

您可以在项目中像这样使用这些自定义 supports-* 修饰符:

属性选择器

Tailwind CSS 中的属性选择器根据元素的属性(例如 data-* 属性或特定值)来设置元素的样式。下文将介绍如何有效地使用这些选择器。

ARIA 状态

在 Tailwind CSS 中，ARIA 属性 用于通过 aria-* 修饰符来设置元素的样式。 ARIA(无障碍富互联网应用)属性提供有关元素的额外信息，例如其状态，这有助于您调整其外观。

使用这些修饰符，您可以根据常见的布尔 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 state 修饰符也可以使用 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-* 属性有条件地设置元素的样式。样式会根据标签页的状态(活动 或 非活动)而变化。您可以使用类似的技巧，结合不同的 data-* 修饰符来创建各种动态设计。

您可以通过配置 tailwind.config.js 为常用数据属性创建特定的快捷方式。这将使您的 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>

您甚至可以使用 Tailwind CSS 通过在类名中使用下划线 (_) 来管理空格和嵌套元素的样式。此技术允许您根据元素在容器中的位置为其应用样式，即使它们嵌套很深。

假设您想为特定容器内的所有 <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 预处理器中一样使用 & 占位符来嵌套选择器。

您可以将 at-rules 与 Tailwind 类结合使用。例如，如果浏览器支持悬停效果，则仅当按钮悬停时才更改其不透明度，请使用:

<button type="button" class="[@media(any-hover:hover){&:hover}]:opacity-100">
<!-- 按钮内容 -->
</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 的样式功能应用于您的自定义样式。

让我们创建一个自定义类，根据不同的状态和屏幕尺寸调整其阴影和背景颜色。

在您的 CSS 文件中，使用 Tailwind 的 @layer 实用程序指令 添加您的自定义样式。

/* 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 伪类会更改元素的样式。

示例

<!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 伪类会在元素获得焦点时(例如，当用户点击表单字段时)为其设置样式。

示例

<!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 伪类会在父元素或其任何子元素获得焦点时，将样式应用于父元素。

示例

<!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 伪类会为元素设置样式。

示例

<!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)

如果元素的 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-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-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> 元素是唯一的子元素，则会获得特殊填充。

奇数元素 (: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>

在此示例中，表格中每个奇数行均会获得浅靛蓝色的背景。

偶数 (:nth-child(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 伪类会将样式应用于该元素。

示例

<!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 伪类用于设置已禁用元素的样式，影响其外观以指示无法与其交互。

示例

<!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 伪类针对已启用的元素，允许在这些元素处于活动状态且可交互时更改样式。

示例

<!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)

当输入元素的值满足指定的有效性条件时，: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)

当输入元素的值在指定范围内时，: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 类来设置输入字段在只读状态下的灰色背景样式。

❮ ❯