Back to Details

tailwind-4

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind 4.1+

Tailwind 4.1+

Setup

配置步骤

css

@import "tailwindcss";

css

@import "tailwindcss";

Required Reading

必读内容

Before writing any
@theme
or
@utility
→ READ

utilities.md

and

examples/*.css

在编写任何
@theme
或
@utility
之前 → 请阅读

utilities.md

和

examples/*.css

文件

Avoid → Use

避坑指南 → 推荐用法

```
tailwind.config.js
```
→
```
@theme
```
in CSS
```
@apply
```
→
```
@utility
```
or raw CSS
```
dark:bg-*
```
per element → semantic tokens (see
```
patterns.md
```
)
```
group
```
class →
```
in-*
```
variant (see
```
variants.md
```
)
```
bg-gradient-to-*
```
→
```
bg-linear-to-*
```

```
tailwind.config.js
```
→ CSS 中的
```
@theme
```
```
@apply
```
→
```
@utility
```
或原生 CSS
为每个元素添加
```
dark:bg-*
```
→ 语义化令牌（详见
```
patterns.md
```
）
```
group
```
类 →
```
in-*
```
变体（详见
```
variants.md
```
）
```
bg-gradient-to-*
```
→
```
bg-linear-to-*
```

Patterns

样式模式

Dark mode:
```
:root
```
/
```
.dark
```
+
```
@theme inline
```
→
```
patterns.md
```
Variants:
```
in-*
```
,
```
has-*
```
,
```
nth-*
```
, negation →
```
variants.md
```
Container queries:
```
@container
```
,
```
@sm:
```
,
```
@md:
```
→
```
variants.md
```
Entry animation:
```
starting:
```
variant →
```
patterns.md
```
Masks:
```
mask-b-from-*
```
,
```
mask-radial-*
```
→
```
patterns.md
```
Project utilities: check
```
styles/base/utilities.css
```

深色模式：
```
:root
```
/
```
.dark
```
+
```
@theme inline
```
→ 详见
```
patterns.md
```
变体：
```
in-*
```
,
```
has-*
```
,
```
nth-*
```
, 否定形式 → 详见
```
variants.md
```
容器查询：
```
@container
```
,
```
@sm:
```
,
```
@md:
```
→ 详见
```
variants.md
```
入场动画：
```
starting:
```
变体 → 详见
```
patterns.md
```
遮罩：
```
mask-b-from-*
```
,
```
mask-radial-*
```
→ 详见
```
patterns.md
```
项目工具类：查看
```
styles/base/utilities.css
```
文件