用途 本技能面向使用 Tailwind CSS 进行界面开发的场景，提供 2025-2026 年的响应式设计与深色模式实现模式参考。内容覆盖断点体系、响应式布局与排版示例、容器查询、深色模式策略与切换逻辑，以及可访问性与性能相关的最佳实践，可作为前端项目落地时的对照手册。
响应式设计 Tailwind 采用移动优先的断点系统：无前缀的工具类适用于所有屏幕尺寸，带断点前缀的工具类在该尺寸及以上生效。默认断点包括 sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px），分别对应大屏手机/小平板、竖屏平板、横屏平板/笔记本、桌面、大桌面等设备。文档建议以内容驱动断点，而不是单纯针对设备，可在 @theme 中通过 --breakpoint-* 自定义或覆盖断点，例如新增 xs、3xl、4xl，或按内容需要调整 sm、lg 的数值。示例覆盖响应式网格、响应式排版、响应式间距、响应式导航以及按屏幕尺寸显示/隐藏元素，并给出常用设备测试宽度（320px、375px、390-430px、768px、1024px、1280px、1440px、1920px）。
容器查询（v4） 容器查询支持组件级响应式，不依赖视口尺寸，适合可复用组件。文档给出通过 @plugin "@tailwindcss/container-queries" 启用、使用 @container 标记父容器、以及命名容器（如 @container/card 与 @lg/card:）的写法，并列出 @xs 到 @3xl 的容器断点及对应宽度与适用场景，同时说明容器查询与视口查询的选用差异：可复用组件、卡片、侧栏部件、CMS/嵌入式内容适合容器查询；页面级布局、导航栏、英雄区、全宽区块适合视口查询。此外还介绍了 max-width 断点写法，如 md:hidden 与自定义 [@media(max-width:600px)] 变体。
深色模式 文档列出多种策略。默认媒体策略跟随操作系统的 prefers-color-scheme，无需额外配置；选择器策略通过自定义变体 @custom-variant dark (&:where(.dark, .dark *)) 配合在 html 或 body 上添加 .dark 类实现手动切换，并提供基础切换函数与带 localStorage 记忆的初始化代码，以及 light/dark/system 三态切换与监听系统偏好变化的实现。还介绍 data 属性策略（以 [data-theme="dark"] 为选择器），与 Next.js 结合使用 next-themes 的安装与 ThemeProvider、RootLayout、ThemeToggle 示例，以及深色模式下的文字、背景、边框、交互元素配色示例和基于 CSS 变量的语义化颜色方案，另含 prose dark:prose-invert 的排版插件深色适配。
最佳实践 包括：坚持移动优先并逐步增强；触控友好元素满足 WCAG 2.2 的 24x24px 最低要求、推荐 44x44px，并保证触控目标间距；使用 clamp 实现流体排版以减少断点跳变；使用语义化深色模式颜色；用 debug-screens 插件辅助测试各断点；通过 @layer components 抽取组件样式减少重复；在亮暗两种模式下都满足对比度要求（普通文本 4.5:1、大文本 3:1、交互元素与相邻色 3:1）并添加 focus-visible 焦点环；使用 motion-reduce 尊重减少动效偏好；使用 loading="lazy" 与 srcset/sizes 优化响应式图片；通过自定义工具类处理刘海屏安全区（env(safe-area-inset-bottom)）。文档还给出响应式与深色模式组合使用的示例。
限制 该内容为模式与示例参考，未提供安装包、版本兼容矩阵、浏览器支持范围或官方 API 变更说明；实际可用性需结合所用 Tailwind 版本与项目配置自行验证。部分代码假设使用 Tailwind v4 的 @theme、@custom-variant、@plugin 语法。除文档中提到的 next-themes 与 debug-screens 安装命令外，其余依赖与集成方式暂未提供。