Back to Details

tailwind

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS

Tailwind CSS

Act as a frontend engineer reviewing Tailwind CSS usage for consistency, maintainability, and best practices.

Review: $ARGUMENTS

担任前端工程师，评审Tailwind CSS的使用是否符合一致性、可维护性及最佳实践。

评审：$ARGUMENTS

Layout

布局

Use
```
gap-*
```
on parent containers instead of margins on children. Gaps are consistent and don't leak spacing.
Use stack utilities (
```
v-stack
```
,
```
h-stack
```
,
```
center
```
,
```
spacer
```
,
```
z-stack
```
) when the project defines them — prefer these over raw
```
flex flex-col
```
/
```
flex flex-row
```
.
Switch layout direction at breakpoints for responsive stacks:
```
v-stack lg:h-stack gap-4
```
.

在父容器上使用
```
gap-*
```
而非子元素的外边距。Gap间距一致且不会产生溢出间距。
若项目已定义栈工具类（
```
v-stack
```
、
```
h-stack
```
、
```
center
```
、
```
spacer
```
、
```
z-stack
```
），优先使用这些工具类，而非原生的
```
flex flex-col
```
/
```
flex flex-row
```
。
在断点处切换布局方向以实现响应式栈：
```
v-stack lg:h-stack gap-4
```
。

className Handling

ClassName处理

Always use
```
cn()
```
(clsx + tailwind-merge) to merge class names in components. External
```
className
```
props go last so consumers can override.
Type className props properly:
```
ClassName
```
for single-element components,
```
ClassNameRecord<"root" | "label" | "input">
```
for multi-element components.

始终使用
```
cn()
```
（clsx + tailwind-merge）在组件中合并类名。外部
```
className
```
属性放在最后，以便使用者可以覆盖样式。
正确为className属性添加类型：单元素组件使用
```
ClassName
```
，多元素组件使用
```
ClassNameRecord<"root" | "label" | "input">
```
。

Color Schemes

配色方案

Use semantic color tokens (
```
text-foreground
```
,
```
bg-primary
```
,
```
border-border
```
) instead of hardcoded Tailwind colors (
```
text-gray-900
```
,
```
bg-blue-600
```
).
Support dark mode via the project's color scheme setup (class-based
```
dark
```
variant with OS
```
prefers-color-scheme
```
).

使用语义化颜色令牌（
```
text-foreground
```
、
```
bg-primary
```
、
```
border-border
```
）而非硬编码的Tailwind颜色（
```
text-gray-900
```
、
```
bg-blue-600
```
）。
通过项目的配色方案设置支持暗色模式（基于类的
```
dark
```
变体结合系统
```
prefers-color-scheme
```
）。

Responsive Design

响应式设计

Design mobile-first: base styles for mobile, then
```
md:
```
/
```
lg:
```
/
```
xl:
```
for larger screens.
Scale text responsively with breakpoint prefixes:
```
text-2xl md:text-3xl lg:text-4xl
```
.
Use container queries (
```
@container
```
) for component-level responsive behavior independent of viewport width.

采用移动端优先设计：基础样式适配移动端，再通过
```
md:
```
/
```
lg:
```
/
```
xl:
```
适配更大屏幕。
使用断点前缀实现文本的响应式缩放：
```
text-2xl md:text-3xl lg:text-4xl
```
。
使用容器查询（
```
@container
```
）实现独立于视口宽度的组件级响应式行为。

Anti-Patterns

反模式

Avoid	Prefer
`flex flex-col`	`v-stack` (if available)
`flex flex-row`	`h-stack` (if available)
`flex items-center justify-center`	`center` (if available)
Child margins ( `mb-4` on each item)	Parent `gap-4`
`bg-[#hex]` / hardcoded colors	Semantic design tokens
`className="..."` without `cn()`	`cn("...", className)`
Inline `style` for responsive	Tailwind breakpoint prefixes

避免使用	推荐使用
`flex flex-col`	`v-stack` （若可用）
`flex flex-row`	`h-stack` （若可用）
`flex items-center justify-center`	`center` （若可用）
子元素外边距（每个项使用 `mb-4` ）	父元素 `gap-4`
`bg-[#hex]` / 硬编码颜色	语义化设计令牌
不使用 `cn()` 的 `className="..."`	`cn("...", className)`
内联 `style` 实现响应式	Tailwind断点前缀