用途
Tailwind CSS 是一个实用优先（Utility-First）的 CSS 框架，用于快速构建自定义用户界面。它不同于传统组件式 CSS 框架，不提供预置组件，而是提供单一职责的工具类，让开发者直接在 HTML/JSX 标记中组合出复杂设计，无需在 HTML 与 CSS 文件之间来回切换。
本技能适用于：使用实用优先方式构建现代 Web 应用；创建跨设备尺寸的响应式设计；实现暗色模式与主题切换；开发样式一致的复用组件库；优化生产环境的 CSS 性能；使用品牌令牌定制设计系统；构建可访问的移动优先界面；与 React、Vue、Svelte、Next.js 等框架集成；快速原型与 UI 迭代；在大型代码库中保持设计一致性。
核心概念
- 工具类优先于组件：使用单一用途的工具类，而非预构建组件。
- 在 HTML 中组合：直接在标记中组合工具类来构建复杂设计。
- 无需上下文切换：停留在 HTML/JSX 中，不必跳转到 CSS 文件。
- 内置设计系统：开箱即用的统一间距、颜色与排版。
- 默认响应式：每个工具类都内置响应式变体。
- JIT 编译：即时模式只生成实际使用的 CSS。
关键原则包括：单一职责（每个类只做好一件事）、可组合性（组合工具类构建复杂设计）、约束（设计系统约束带来更一致 UI）、灵活性（需要时可用任意值做一次性定制）、性能（通过智能清除输出最小 CSS）。
主要能力
核心工具类
布局工具类涵盖 display（block、inline、inline-block、flex、grid、hidden）、定位（relative、absolute、fixed、sticky）、尺寸（w-full、h-screen、w-1/2、任意值如 w-[750px]、min-w-0、max-w-md）。
间距工具类涵盖内边距与外边距（p-4、m-2、pt-8、pb-4、pl-6、pr-2、mt-4、mb-8、ml-auto、mr-auto）、逻辑属性（px-4、py-2、ps-4、pe-2，支持 RTL）、负外边距（-mt-4、-ml-2）、子元素间距（space-x-4、space-y-2）。
排版工具类涵盖字体族（font-sans、font-serif、font-mono）、字号（text-xs 至 text-4xl 等）、字重（font-light 至 font-bold）、文本对齐、文本颜色（含透明度如 text-red-500/75）、文本装饰（underline、line-through、no-underline）、文本变换（uppercase、lowercase、capitalize）、行高与字距（leading-tight、leading-relaxed、tracking-wide）。
颜色工具类涵盖背景色（bg-white、bg-gray-100、bg-blue-500、bg-red-600/50）、渐变（bg-gradient-to-r from-purple-500 to-pink-500、三色渐变）、文本与边框颜色（含 dark: 变体与 hover: 交互色）。
边框与圆角涵盖边框宽度（border、border-2、border-t-4）、圆角（rounded、rounded-lg、rounded-full、rounded-t-lg）、边框样式（border-solid、border-dashed、border-dotted）。
阴影与效果涵盖盒阴影（shadow-sm 至 shadow-xl、shadow-none hover:shadow-lg）、文字阴影（text-shadow-lg、text-shadow-sm text-shadow-gray-300）、透明度（opacity-50、opacity-0 hover:opacity-100）。
响应式设计
采用移动优先断点系统：sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px。可组合响应式工具类，如 w-full md:w-1/2 lg:w-1/3、flex flex-col md:flex-row、grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4，以及按断点显示隐藏（block md:hidden、hidden md:block、hidden md:block lg:hidden）。
支持自定义断点（通过 @theme 定义 --breakpoint-xs、--breakpoint-3xl）、断点区间定位（md:max-xl:flex、max-md:hidden）、容器查询（@container、@lg:grid-cols-3、@min-[475px]:flex-row、w-[50cqw]）。
暗色模式
支持自动暗色模式（基于系统偏好，使用 dark: 变体）与手动暗色模式（通过 @custom-variant dark (&:where(.dark, .dark *)) 配置类名控制）。提供暗色模式切换逻辑，使用 localStorage 持久化，并建议在 <head> 内联脚本以避免 FOUC。还支持基于 data 属性的暗色模式（@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *))）。
状态变体
涵盖交互状态（hover、focus、active、disabled、focus-within）、表单状态（focus:border-blue-500、focus:ring-2、invalid:border-red-500、placeholder:text-gray-400、checked、indeterminate、file: 系列）、伪类与伪元素（first、last、odd、even、before、after、group-hover、peer-checked）、媒体查询变体（motion-reduce、contrast-more、print、portrait、landscape）。
组件抽取
当出现重复模式、具有语义含义、需要团队共享或需要统一维护时，应抽取组件。资料提供了 React、Vue、Svelte 的组件抽取示例，例如带 size 与 variant 的 Button 组件、支持暗色模式的 Card 组件、带类型的 Alert 组件。
使用方式
在 HTML/JSX 中直接组合工具类即可。响应式使用断点前缀（如 md:、lg:），状态使用状态前缀（如 hover:、focus:、dark:）。自定义主题通过 CSS 中的 @theme 块定义设计令牌，自定义变体通过 @custom-variant 定义。暗色模式切换通过 JavaScript 操作根元素类名或 data 属性，并结合 localStorage 持久化用户选择。
适用场景
现代 Web 应用开发、响应式界面、暗色模式与主题切换、组件库与设计系统、快速原型与 UI 迭代、与 React/Vue/Svelte/Next.js 集成、大型代码库的设计一致性维护。
限制
资料未提供具体的收费、价格、平台支持范围、性能基准数据或版本兼容性细节，这些内容暂未提供。