mcpField
B
busirocket-tailwindcss-v4

busirocket-tailwindcss-v4

github.com/busirocket设计与 UI199 次安装15 周前更新
代码仓库

关于 busirocket-tailwindcss-v4

为 Tailwind CSS v4 项目提供配置与样式编写指导，侧重优先使用工具类、保持设计令牌一致、限制自定义 CSS，并在类名难维护时提取组件。

主要功能

  1. 01Tailwind CSS v4 配置指引
  2. 02优先使用工具类样式
  3. 03自定义 CSS 与令牌一致性
  4. 04复杂类名的组件提取
  5. 05CSS 导入顺序指引

适用场景

  1. 01配置 Tailwind CSS v4
  2. 02用工具类编写 React 组件样式
  3. 03减少项目中的样式漂移

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/busirocket/agents-skills --skill busirocket-tailwindcss-v4

安装后在 Claude Code 中输入/busirocket-tailwindcss-v4确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

rules/
tailwind-avoid-drift.md
tailwind-class-strategy.md
tailwind-css-ordering.md
tailwind-setup.md

详细介绍

Tailwind CSS v4 最佳实践

Tailwind CSS v4 项目的设置和样式模式。

适用场景

在以下情况使用此技能：

  • 在项目中设置 Tailwind CSS v4
  • 使用 Tailwind 工具类编写组件样式
  • 决定何时提取自定义 CSS，何时使用工具类
  • 避免样式偏移并保持一致性

不可妥协的要求（必须）

  • 通过单个全局 CSS 入口导入 Tailwind：@import 'tailwindcss';
  • 确保从根布局导入该全局 CSS。
  • 大多数样式优先使用 className 中的 Tailwind 工具类。
  • 避免使用大型自定义 CSS 文件；自定义 CSS 仅用于全局样式（重置样式、设计令牌）。
  • 除非必要，否则避免大量使用任意值；优先使用一致的令牌。

类名策略

  • 如果类名字符串变得难以阅读：
    • 提取一个小型展示组件。
    • 或提取 components/<area>/... 封装组件，而不是编写大型自定义 CSS。

规则

设置
  • tailwind-setup - Tailwind CSS v4 设置（单个全局 CSS 导入）
类名策略
  • tailwind-class-strategy - 优先使用工具类；必要时提取组件
  • tailwind-avoid-drift - 避免样式偏移（将自定义 CSS 保持为全局样式，优先使用令牌）
排序
  • tailwind-css-ordering - CSS 顺序取决于导入顺序

相关技能

  • busirocket-react - 组件提取模式

使用方法

阅读各个规则文件，了解详细说明和代码示例：

rules/tailwind-setup.md
rules/tailwind-class-strategy.md
rules/tailwind-avoid-drift.md

每个规则文件都包含：

  • 关于规则重要性的简要说明
  • 代码示例（正确和错误的模式）
  • 补充背景信息和最佳实践

评论

支持 Markdown