tailwindcss-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS Development

Tailwind CSS 开发

House style first

首先遵循项目既有风格

Read the components around the one you are touching before you add a class. Match what they already do — their spacing rhythm, their color tokens, their breakpoints, their component boundaries. The house style outranks any default you would otherwise reach for.

Dark mode is the part most often missed: if the surrounding pages carry

dark:

variants, every new element carries them too.

在添加 class 之前，先阅读正在修改的组件周围的组件。沿用它们已有的做法——间距节奏、颜色 token、断点和组件边界。项目既有风格的优先级高于你原本会采用的所有默认做法。

暗色模式是最容易遗漏的部分：如果周边页面带有

dark:

变体，那么每个新元素也要带上相应的变体。

Stay on the scale

坚持使用标准刻度

Every value comes from Tailwind's default spacing, size, and color scale. When the scale genuinely lacks a value, extend the scale — add a token in

@theme

— and use the token.

Two escape hatches lead off the scale, and both stay shut:

Arbitrary values — the square-bracket form (
```
w-[12px]
```
,
```
text-[20px]
```
,
```
bg-[#123456]
```
). Use the scale or an
```
@theme
```
token instead.
Hand-written CSS — custom class names and CSS rules (
```
.my-card
```
,
```
.custom-button
```
). Reuse comes from extracting a component (Blade, Vue, JSX) instead.

每个值都应取自 Tailwind 默认的 spacing、size 和 color 刻度。如果刻度确实缺少所需值，则扩展刻度——在

@theme

中添加 token——然后使用该 token。

以下两种方式会导致脱离刻度，二者都应避免：

Arbitrary values——方括号形式（
```
w-[12px]
```
、
```
text-[20px]
```
、
```
bg-[#123456]
```
）。请改用标准刻度或
```
@theme
```
token。
Hand-written CSS——自定义 class 名称和 CSS 规则（
```
.my-card
```
、
```
.custom-button
```
）。复用应通过提取组件（Blade、Vue、JSX）来实现。

Utilities

Use

gap

for space between siblings; reach for margin only to push an element away from something that is not its sibling.

Keep the class list minimal: drop classes that restate what a parent already sets, and hoist a class to the parent when every child repeats it.

使用

gap

控制兄弟元素之间的间距；只有在需要将元素推离非兄弟元素时才使用 margin。

保持 class 列表精简：删除重复描述父元素已有设置的 class；如果每个子元素都重复某个 class，则将它上移到父元素。

v4, not v3

v4，不是 v3

The config is CSS-first. There is no

tailwind.config.js

and no

corePlugins

; theme values live in

@theme

css

@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Tailwind is imported as plain CSS —

@import "tailwindcss";

— in place of the v3

@tailwind base/components/utilities

directives.

These v3 utilities were removed. Opacity is now a slash modifier:

Removed	v4
`bg-opacity-*`	`bg-black/*`
`text-opacity-*`	`text-black/*`
`border-opacity-*`	`border-black/*`
`divide-opacity-*`	`divide-black/*`
`ring-opacity-*`	`ring-black/*`
`placeholder-opacity-*`	`placeholder-black/*`
`flex-shrink-*`	`shrink-*`
`flex-grow-*`	`grow-*`
`overflow-ellipsis`	`text-ellipsis`
`decoration-slice`	`box-decoration-slice`
`decoration-clone`	`box-decoration-clone`

配置采用 CSS-first 方式。不存在

tailwind.config.js

，也没有

corePlugins

；主题值位于

@theme

：

css

@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Tailwind 以普通 CSS 的方式导入——

@import "tailwindcss";

——用于替代 v3 的

@tailwind base/components/utilities

指令。

以下 v3 utility 已移除。不透明度现在通过斜杠修饰符设置：

已移除	v4
`bg-opacity-*`	`bg-black/*`
`text-opacity-*`	`text-black/*`
`border-opacity-*`	`border-black/*`
`divide-opacity-*`	`divide-black/*`
`ring-opacity-*`	`ring-black/*`
`placeholder-opacity-*`	`placeholder-black/*`
`flex-shrink-*`	`shrink-*`
`flex-grow-*`	`grow-*`
`overflow-ellipsis`	`text-ellipsis`
`decoration-slice`	`box-decoration-slice`
`decoration-clone`	`box-decoration-clone`

Before you finish

完成前

Re-read every class you wrote or changed. Each one is a v4 utility, on the scale, and consistent with the house style around it. Fix the ones that are not before you report done.

重新检查你编写或修改的每个 class。确认每个 class 都是 v4 utility、采用标准刻度，并与周边既有风格一致。对于不符合要求的 class，请先修正再报告完成。