本技能聚焦 Tailwind CSS 的实用优先（utility-first）写法、配置方式与组件配方，适合在用户提到 tailwind、tailwindcss、utility classes 等关键词时参考。
安装与配置（v3）：使用 npm install -D tailwindcss postcss autoprefixer 安装，并用 npx tailwindcss init -p 初始化。tailwind.config.js 中通过 content 指定扫描范围，theme.extend 扩展主题，plugins 添加插件。CSS 入口使用 @tailwind base、@tailwind components、@tailwind utilities；PostCSS 配置引入 tailwindcss 与 autoprefixer。
核心概念：Tailwind 是 utility-first，直接在标记中用单一用途类组合设计，而非编写自定义 CSS。推荐类顺序为布局/定位、display/flex/grid、间距、尺寸、排版、背景、边框、效果、过渡；响应式与状态前缀放在最外层。
布局：涵盖 flex（如 flex items-center justify-between gap-4）、grid（grid-cols-3、响应式列数）、container、间距（p-{n}、m-{n}、gap-{n}，1 单位等于 0.25rem/4px）与尺寸（h-screen、w-full、max-w-lg、min-h-0，以及 full/screen/min/max/fit/auto 与分数值）。
排版：字体大小（text-xs 到 text-9xl）、字重（font-thin 到 font-black）、行高（leading-none/tight/normal/loose）、字距（tracking-*），以及单行省略 truncate 与多行截断 line-clamp-3。
响应式设计：移动优先断点，无前缀适用于所有尺寸，带前缀表示该断点及以上：sm:640px、md:768px、lg:1024px、xl:1280px、2xl:1536px。示例包括 w-full md:w-1/2 lg:w-1/3、hidden lg:block 等。
深色模式：class 策略（手动切换，darkMode: 'class'，在 html 加 dark 类配合 dark: 变体）与 media 策略（跟随系统 prefers-color-scheme）。
状态与修饰符：hover、active、focus、focus-visible、disabled，以及 first、last、odd、even 等结构伪类；group 让父级状态影响子元素样式，peer 让兄弟状态影响另一兄弟，支持命名 group（如 group/sidebar）。
主题扩展与任意值：在 theme.extend 中扩展 colors、spacing、fontFamily 等，不会覆盖默认值；直接在 theme 下定义键会替换该属性的整个默认刻度。任意值使用方括号，如 w-[137px]、h-[calc(100vh-4rem)]、bg-[#1a1a1a]、text-[13px]、grid-cols-[200px_1fr_200px]、top-[var(--header-height)]，任意属性如 [mask-type:alpha]。重要修饰符使用前缀 !，如 !text-red-500，仅在覆盖第三方库样式等场景谨慎使用。
动画与过渡：animate-spin、animate-pulse、animate-ping、animate-bounce；transition-colors、transition-all、duration-200/300、ease-in-out/ease-out，以及 hover:scale-105、hover:-translate-y-1、hover:rotate-3 等变换。
可复用组件配方：提供按钮、卡片、输入框、徽章、导航栏、模态框遮罩的完整示例类组合。
@apply 用于组件抽取：在 @layer components 中定义如 .btn-primary，适合无法使用共享组件的重复模式（正文样式、基础表单元素）。不推荐在框架组件（React、Vue、Svelte）可封装时使用，不用于一次性样式，避免写出 @apply 密集、重新实现传统 CSS 的样式表。
内容配置与 tree-shaking：Tailwind 扫描 content 中的类名，只生成匹配的 CSS，路径配置错误是样式缺失的最常见原因。动态拼接类名（如 text-${color}-500）无法被检测，需使用完整字符串或 safelist（safelist 支持字符串与正则 pattern）。可指定第三方包路径。
常见类组合：居中（flex items-center justify-center、grid place-items-center）、全屏居中（flex min-h-screen items-center justify-center）、无障碍隐藏（sr-only）、宽高比（aspect-video、aspect-square）、子元素分隔线（divide-y divide-gray-200）、渐变（bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500）、粘性头部（sticky top-0 z-40 bg-white/90 backdrop-blur）、可滚动容器（h-64 overflow-y-auto）、图片覆盖（h-48 w-full object-cover）。
Tailwind v4 变更：配置从 JavaScript 转向 CSS。使用 @import "tailwindcss" 替代三条 @tailwind 指令；@theme 替代 theme.extend，所有设计令牌为 CSS 自定义属性，可定义 --color-brand-500、--font-family-sans、--breakpoint-3xl 等；自动内容检测取代手动 content 配置；@utility 定义自定义工具类，@variant 定义自定义变体；darkMode 选项由 @variant dark 覆盖取代；不再需要单独的 PostCSS 插件，使用独立 CLI 或 Vite 插件。v4 安装：Vite 用 npm install tailwindcss @tailwindcss/vite，PostCSS 用 npm install tailwindcss @tailwindcss/postcss，CLI 用 npx @tailwindcss/cli -i input.css -o output.css。自定义工具类示例：@utility tab-4 { tab-size: 4; }，之后即可作为类 tab-4 使用。
限制与注意：资料未提供具体收费、价格、平台或效果数据；内容扫描路径配置与动态类名是常见问题来源。