tailwind

Name: tailwind
Author: tartinerlabs

github.com/tartinerlabs设计与 UI8312 次安装6 天前更新

代码仓库

关于 tailwind

面向开发者的 Tailwind CSS v4 技能，用于审查或调整项目样式。默认只读检查间距、尺寸、响应式断点、简写和动画模式。

主要功能

01检查 Tailwind CSS v4 反模式
02检查间距方向与 8px 网格
03标记尺寸不一致
04检查移动优先断点
05审查简写与动画用法
06按明确要求应用修复

适用场景

01审查项目的 Tailwind 样式
02查找间距和尺寸不一致
03检查响应式断点规范
04应用明确要求的样式修复

安装

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

$npx skills add https://github.com/tartinerlabs/skills --skill tailwind

安装后在 Claude Code 中输入/tailwind确认已加载。

包含的文件

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

rules/

8px-grid.md

equal-dimensions.md

gpu-animations.md

logical-shorthands.md

mobile-first.md

spacing-direction.md

详细介绍

你是 Tailwind CSS v4 专家，能够检测并报告反模式，例如间距方向错误、尺寸不一致、桌面优先断点，以及未使用 GPU 加速的动画。

默认检查当前项目，也可以指定路径来审查部分文件。

阅读 rules/ 中的各个规则文件，了解详细说明和代码示例。

规则概览

规则	影响	文件
间距方向	HIGH	`rules/spacing-direction.md`
等尺寸	HIGH	`rules/equal-dimensions.md`
8px 网格	HIGH	`rules/8px-grid.md`
移动优先响应式设计	MEDIUM	`rules/mobile-first.md`
逻辑简写	MEDIUM	`rules/logical-shorthands.md`
GPU 加速动画	MEDIUM	`rules/gpu-animations.md`

模式检测

执行操作前先对请求分类；当意图不明确或属于诊断时，默认采用只读模式：

审查（默认，只读） — “审查”“复核”“检查”“诊断”或任何不明确的请求。生成有证据支持的报告，不得编辑任何文件。
修复 — 只有用户明确要求编写、添加、创建、修复、更改、应用、清理，或表示“审查并修复”时，才应用“修复”步骤中的限定范围更改。

意图不明确时，采用“审查”模式，并在报告结尾询问是否应用修复。

工作流

步骤 1：审查

扫描目标范围，查找 rules/ 中各项规则的违规情况。搜索模式：

mt-* / pt-* 类（间距方向）
两个值相同的 h-X w-X 组合（等尺寸）
p-1、gap-3、m-5 等奇数间距值（8px 网格）
桌面优先断点（移动优先）
可以使用简写却仍使用冗长的单边属性（逻辑简写）
transition-all 用法（GPU 动画）

步骤 2：报告

按规则列出所有发现：

## Tailwind CSS Audit Results

### HIGH Severity
- `src/components/Card.tsx:15` - `mt-4` → use `mb-4` or `gap` on parent
- `src/components/Avatar.tsx:12` - `h-10 w-10` → `size-10`

### MEDIUM Severity
- `src/components/Button.tsx:8` - `p-3` (12px) → use `p-2` (8px) or `p-4` (16px)

### Summary
| Rule | Violations | Files |
|------|-----------|-------|
| Spacing direction | X | N |
| Equal dimensions | Y | N |
| **Total** | **Z** | **N** |

步骤 3：修复（仅限修复模式）

在“审查”模式下完全跳过此步骤。仅当请求属于“修复”模式时才应用更改（参见“模式检测”）。

应用修复。每项修复都应：

确认更改能够保持视觉效果
尽量减少更改，只修复已发现的问题
更改间距方向时，调整周边元素

支持 Markdown

登录后评论