Tailwind CSS Development 是一个用于使用 Tailwind CSS v4 工具类为应用添加样式的技能。其触发场景包括：为组件或页面添加样式、进行响应式设计、实现暗色模式、将重复模式提取为组件、调试间距或布局问题。
主要能力与使用方式：使用 Tailwind CSS 类为 HTML 添加样式，在引入新模式前先检查并遵循项目中已有的 Tailwind 约定；可提议将重复模式提取为符合项目约定的组件（如 Blade、JSX、Vue）。需要综合考虑类名位置、顺序、优先级与默认值，移除冗余类，谨慎地向父元素或子元素添加类以减少重复，并按逻辑对元素分组。详细模式与文档可通过 search-docs 查询。
Tailwind CSS v4 相关要点：始终使用 Tailwind CSS v4，避免使用已废弃的工具类。v4 不支持 corePlugins。配置采用 CSS 优先方式，使用 @theme 指令，不再需要单独的 tailwind.config.js 文件。导入语法上，v4 使用常规 CSS 的 @import 语句导入 Tailwind，而非 v3 的 @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。暗色模式方面：若现有页面与组件支持暗色模式，则新页面与新组件必须以相同方式支持，通常使用 dark: 变体。
常见模式包括 Flexbox 布局与 Grid 布局。常见陷阱包括：使用已废弃的 v3 工具类（如 bg-opacity-、flex-shrink- 等）；使用 @tailwind 指令而非 @import "tailwindcss"；尝试使用 tailwind.config.js 而非 CSS 的 @theme 指令；在同级元素间使用 margin 而非 gap 工具类进行间距控制；在项目使用暗色模式时忘记添加暗色模式变体。
关于收费、价格、平台、效果或具体使用步骤等更多信息，资料暂未提供。