Tailwind CSS Best Practices 是一个面向 Tailwind CSS 的技能，提供构建一致、可维护界面的综合模式，适用于 Tailwind CSS v3.4+ 与 v4.0+。该技能共包含 29 条规则，分为 8 个类别，版本为 1.0.0，采用 MIT 许可，文档指向 tailwindcss.com/docs。
用途与适用场景： 在编写响应式布局、实现暗色模式、创建可复用组件样式、配置 Tailwind（v3 或 v4）、将项目从 v3 迁移到 v4，以及使用 v4 搭建新项目时，可参考这些指南。
使用方式（版本检测）： 资料强调在给出任何建议前，必须先检查 Tailwind 版本，因为 v3 与 v4 存在根本差异。可通过 package.json 中安装的版本判断："tailwindcss": "^3.x" 适用 v3 规则，"tailwindcss": "^4.x" 适用 v4 规则。此外还可检查以下信号：存在 tailwind.config.js 为 v3；CSS 中存在 @import "tailwindcss" 为 v4；依赖中存在 @tailwindcss/vite 为 v4；依赖中存在 @tailwindcss/postcss 为 v4；CSS 中存在 @theme {} 块为 v4。若为 v3，则应用 resp-、dark-、comp-、config- 规则，并注意 v4 已可用；若为 v4，则应用 v4- 规则，tailwind.config.js 模式不再适用，应改用 @theme {}；若从 v3 迁移到 v4，则直接遵循 v4-migration 规则。使用时应先执行版本检测步骤，再阅读相关规则文件：v3 项目可参考 rules/config-extend-theme.md、rules/dark-setup.md、rules/comp-clsx-cn.md、rules/resp-mobile-first.md；v4 项目可参考 rules/v4-installation.md、rules/v4-theme-configuration.md、rules/v4-custom-utilities.md；从 v3 迁移到 v4 可参考 rules/v4-migration.md。
规则分类与优先级：
- 响应式设计（CRITICAL，前缀 resp-，v3 / v4）：resp-mobile-first 移动优先方法、resp-breakpoints 正确使用断点、resp-container 容器模式、resp-grid-flex Grid 与 Flexbox 取舍、resp-hidden-shown 条件显示。
- 暗色模式（CRITICAL，前缀 dark-，v3 / v4）：dark-setup 配置暗色模式、dark-classes 应用暗色模式类、dark-toggle 实现暗色模式切换、dark-system-preference 尊重系统偏好、dark-colors 为两种模式设计。
- 组件模式（HIGH，前缀 comp-，v3 / v4）：comp-clsx-cn 条件类名工具、comp-variants 组件变体模式、comp-slots 基于插槽的组件、comp-composition 组合工具类。
- 自定义配置（HIGH，前缀 config-，仅 v3）：config-extend 扩展与覆盖主题、config-colors 自定义调色板、config-fonts 自定义字体、config-screens 自定义断点、config-plugins 使用插件。
- V4 与迁移（HIGH，前缀 v4-，仅 v4）：v4-installation 使用 Vite 或 PostCSS 安装 v4、@source、@reference；v4-theme-configuration 用 CSS 中的 @theme {} 替代 tailwind.config.js；v4-custom-utilities 使用 @utility、@custom-variant、@variant、@plugin；v4-migration 从 v3 到 v4 的分步迁移，包括重命名的工具类、starting:、forced-colors:。
- 间距与排版（MEDIUM，前缀 space-，v3 / v4）：space-consistent 一致的间距比例、space-margins 外边距模式、space-padding 内边距模式、typo-scale 排版比例、typo-line-height 行高。
- 动画（MEDIUM，前缀 anim-，v3 / v4）：anim-transitions 过渡工具类、anim-keyframes 自定义关键帧、anim-reduced-motion 尊重动效偏好。
- 性能（LOW，前缀 perf-，v3 / v4）：perf-purge 内容配置、perf-jit JIT 模式优势、perf-arbitrary 任意值用法。
关键模式示例： 资料给出了移动优先响应式设计示例，即从移动端开始，再添加更大断点，例如 w-full md:w-1/2 lg:w-1/3 与 text-sm md:text-base lg:text-lg，并提醒不要采用桌面优先的写法。暗色模式方面，v3 在 tailwind.config.js 中设置 darkMode: 'class'，v4 仅需 CSS，v4 中暗色模式默认基于 class、无需配置；组件层面在两个版本中一致，例如 bg-white dark:bg-gray-900 text-gray-900 dark:text-white，并通过 document.documentElement.classList.toggle('dark') 切换。条件类名方面，资料给出基于 clsx 与 tailwind-merge 的 cn 工具函数，用于智能合并 Tailwind 类，并展示了带 variant、size 的 Button 组件示例。主题配置方面，v3 使用 tailwind.config.js 的 theme.extend 定义 colors、fontFamily、spacing 以及 plugins；v4 仅在 app.css 中通过 @theme 定义 --color-primary-500、--font-sans、--spacing-18、--breakpoint-3xl 等变量。资料还给出响应式网格布局（如 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4）与仪表盘侧边栏布局、表单样式以及带 motion-reduce 的动画示例。
限制与缺失事实： 资料未提供收费、价格、平台支持范围、具体效果保证或强制使用步骤等超出上述说明的信息。该技能采用 MIT 许可，完整许可文本需参见仓库。其参考资料包括 Tailwind CSS 官方文档、响应式设计指南、暗色模式指南、配置指南、Tailwind UI、Headless UI、Heroicons，生态工具包括 Tailwind CSS IntelliSense、Prettier 插件、tailwind-merge、clsx、CVA。