关于 tailwindcss
面向使用现有主题和设计系统的开发者，提供 Tailwind CSS v4 样式指导，涵盖语义化令牌、可发现的类名、响应式布局及项目验证方式。
主要功能
- 01使用语义化主题令牌
- 02保持类名静态可发现
- 03使用合并工具组合类名
- 04避免特异性权重技巧
- 05构建响应式且支持键盘的布局
- 06遵循仓库验证流程
适用场景
- 01使用 Tailwind CSS v4 编写组件样式
- 02适配现有设计系统
- 03组合变体并处理 className 覆盖
- 04通过项目命令检查样式变更
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tailwindcss确认已加载。
附带文件references/patterns.md
详细介绍
Tailwind CSS v4
优先使用工具类为组件设置样式。CSS 仍负责主题令牌、基础规则，以及工具类无法清晰表达的样式。使用已安装的 Tailwind 版本和现有设计系统。
- 使用语义化令牌设置主题感知型颜色、边框和状态。使用项目令牌源和设计文档中的名称；不要假设存在通用的 shadcn 词汇体系。
- 保持类名完整且可静态发现。使用查找映射，而不是
bg-${color}-500这样的插值片段。 - 将较长的类名分组以提高可读性；不设字符数限制。组合变体或接受可覆盖的
className值时，使用项目的cn/合并辅助函数。 - 通过样式设计和类合并解决优先级，避免使用
!important。仅在仓库允许的情况下使用@apply。 - 根据内容需求构建响应式布局，保留清晰可见的键盘焦点，并选择受支持的 v4 工具类，而不是照搬旧式写法。
- 通过仓库对应的验证门禁进行验证。使用现有的根目录/软件包命令，并复用有效的验证结果；样式工作无需另行执行 lint/typecheck 流程。
请阅读 references/patterns.md，了解正在修改的工具类或变体。文档中的令牌名称仅为示例；请使用实际的主题清单。
评论
支持 Markdown