Tailwind CSS Development 是一个用于指导 Tailwind CSS 开发的技能，来源于 coollabsio/coolify。其触发条件为：当用户消息中包含任何形式的“tailwind”时始终调用；此外，在构建响应式网格布局（例如多列卡片网格、产品列表等）时也应调用。
用途与定位 该技能用于在开发过程中提供 Tailwind CSS 的使用规范与最佳实践，帮助开发者按照项目既有约定编写样式，并避免使用已弃用的写法。它建议使用 search-docs 获取详细的 Tailwind CSS v4 模式与文档。
主要能力
- 使用 Tailwind CSS 类为 HTML 添加样式，并在引入新模式前检查并遵循项目中已有的 Tailwind 约定。
- 建议将重复模式抽取为符合项目约定的组件（例如 Blade、JSX、Vue）。
- 关注类名的放置、顺序、优先级与默认值；去除冗余类，谨慎地向父元素或子元素添加类以减少重复，并对元素进行逻辑分组。
- 针对 Tailwind CSS v4 的专门指导：始终使用 Tailwind CSS v4 并避免已弃用的工具类；说明 corePlugins 在 Tailwind v4 中不受支持。
- CSS 优先配置：在 Tailwind v4 中，配置采用 CSS 优先方式，通过 @theme 指令完成，无需单独的 tailwind.config.js 文件。示例： @theme { --color-brand: oklch(0.72 0.11 178); }
- 导入语法：在 Tailwind v4 中，使用常规 CSS @import 语句导入 Tailwind，而不是 v3 中的 @tailwind 指令。 弃用：@tailwind base; @tailwind components; @tailwind utilities; 改用：@import "tailwindcss";
- 被替换的工具类：Tailwind v4 移除了已弃用的工具类，需使用对应替换项，不透明度值仍为数字。对照关系包括：bg-opacity-* 替换为 bg-black/；text-opacity- 替换为 text-black/；border-opacity- 替换为 border-black/；divide-opacity- 替换为 divide-black/；ring-opacity- 替换为 ring-black/；placeholder-opacity- 替换为 placeholder-black/；flex-shrink- 替换为 shrink-；flex-grow- 替换为 grow-*；overflow-ellipsis 替换为 text-ellipsis；decoration-slice 替换为 box-decoration-slice；decoration-clone 替换为 box-decoration-clone。
- 间距：在兄弟元素之间使用 gap 工具类而非 margin 进行间距控制。示例： <div class="flex gap-8"> <div>Item 1</div> <div>Item 2</div> </div>
- 暗色模式：如果现有页面和组件支持暗色模式，则新页面和组件必须以相同方式支持，通常使用 dark: 变体。示例： <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> Content adapts to color scheme </div>
常见陷阱
- 使用已弃用的 v3 工具类（bg-opacity-、flex-shrink- 等）。
- 使用 @tailwind 指令而非 @import "tailwindcss"。
- 尝试使用 tailwind.config.js 而非 CSS @theme 指令。
- 在兄弟元素之间使用 margin 而非 gap 工具类进行间距控制。
- 在项目使用暗色模式时忘记添加暗色模式变体。
适用场景 适用于任何涉及 Tailwind CSS 的前端样式开发工作，尤其是需要遵循项目约定、使用 Tailwind CSS v4 新特性、构建响应式网格布局、处理暗色模式以及进行类名组织与组件抽取的场景。
限制 该技能聚焦于 Tailwind CSS 的样式编写规范与 v4 迁移要点，未提供关于收费、价格、平台支持范围或具体效果的信息。