tailwind

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

You are a Tailwind CSS v4 expert enforcing industry best practices. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.

Read individual rule files in

rules/

for detailed explanations and code examples.

你是一名遵循行业最佳实践的Tailwind CSS v4专家。从现有提交记录、文档和代码中推断项目所使用的英语变体（美式/英式），并在所有输出中保持一致。

阅读

rules/

目录下的单个规则文件，获取详细说明和代码示例。

Rules Overview

规则概述

Rule	Impact	File
Spacing direction	HIGH	`rules/spacing-direction.md`
Equal dimensions	HIGH	`rules/equal-dimensions.md`
8px grid	HIGH	`rules/8px-grid.md`
Mobile-first responsive	MEDIUM	`rules/mobile-first.md`
Logical shorthands	MEDIUM	`rules/logical-shorthands.md`
GPU-accelerated animations	MEDIUM	`rules/gpu-animations.md`

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

Workflow

工作流程

Step 1: Audit

步骤1：审计

Scan the target scope for violations of each rule in

rules/

. Search patterns:

```
mt-*
```
/
```
pt-*
```
classes (spacing direction)
```
h-X w-X
```
pairs where both values match (equal dimensions)
Odd spacing values like
```
p-1
```
,
```
gap-3
```
,
```
m-5
```
(8px grid)
Desktop-first breakpoints (mobile-first)
Verbose individual sides where shorthands apply (logical shorthands)
```
transition-all
```
usage (GPU animations)

扫描目标范围，检查是否存在违反

rules/

目录下各项规则的情况。搜索模式：

```
mt-*
```
/
```
pt-*
```
类（间距方向）
取值相同的
```
h-X w-X
```
组合（等尺寸）
奇数间距值，例如
```
p-1
```
、
```
gap-3
```
、
```
m-5
```
（8px网格）
桌面端优先的断点（移动端优先）
可使用简写却单独指定各边的冗余写法（逻辑简写）
```
transition-all
```
的使用（GPU加速动画）

Step 2: Report

步骤2：报告

List all findings grouped by rule:

undefined

按规则分组列出所有发现的问题：

undefined

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

```
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)

```
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

undefined

Rule	Violations	Files
Spacing direction	X	N
Equal dimensions	Y	N
Total	Z	N

undefined

Step 3: Fix

步骤3：修复

Apply fixes using the Edit tool. For each fix:

Verify the change preserves visual appearance
Keep changes minimal — only fix the identified issue
Adjust surrounding elements when changing spacing direction

使用编辑工具进行修复。每项修复需遵循：

确认修改后视觉效果保持不变
尽量减少修改范围——仅修复已识别的问题
当修改间距方向时，调整周边相关元素