用途：当用户消息包含 tailwind，或需要构建响应式栅格布局（如多列卡片网格、商品列表）时调用本技能，用于按 Tailwind CSS 规范编写与调整样式代码。
主要能力：提供 Tailwind CSS v4 的写法指导，包括 CSS-first 配置、导入语法、废弃工具类替换、间距、深色模式与常见布局模式。可使用 search-docs 查询 Tailwind CSS v4 的详细模式与文档。
v4 要点：配置采用 CSS-first，通过 @theme 指令完成，无需单独的 tailwind.config.js，例如 @theme { --color-brand: oklch(0.72 0.11 178); }。导入改为普通 CSS 的 @import 语句：@import "tailwindcss";，替代 v3 的 @tailwind base/components/utilities。v4 不支持 corePlugins。
废弃工具类替换：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。
使用方式：先用 Tailwind 类编写 HTML，并先检查并遵循项目中已有的 Tailwind 约定再引入新模式。可将重复模式按项目约定（如 Blade、JSX、Vue）抽取为组件。注意类的放置、顺序、优先级与默认值，删除冗余类，谨慎在父或子元素上添加类以减少重复，并按逻辑分组元素。兄弟元素间距使用 gap 而非 margin。若项目支持深色模式，新页面与组件需以同样方式支持，通常使用 dark: 变体。
常见布局：Flexbox 如 flex items-center justify-between gap-4；Grid 如 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6。
常见问题：使用 v3 已废弃工具类；使用 @tailwind 指令而非 @import "tailwindcss"；尝试使用 tailwind.config.js 而非 CSS @theme 指令；兄弟元素间距用 margin 而非 gap；项目使用深色模式时忘记添加 dark 变体。具体安装与版本信息暂未提供。