tailwind-utility-classes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS - Utility Classes

Tailwind CSS - 工具类

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.

Tailwind CSS是一个实用优先的CSS框架，它提供底层工具类，让你无需离开HTML就能构建自定义设计。

Key Concepts

核心概念

Utility-First Approach

实用优先方法

Instead of writing custom CSS, compose designs using pre-built utility classes:

html

<!-- Traditional CSS -->
<style>
  .btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>
<button class="btn">Click me</button>

<!-- Tailwind utility-first -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click me
</button>

无需编写自定义CSS，使用预构建的工具类组合设计：

html

<!-- Traditional CSS -->
<style>
  .btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>
<button class="btn">Click me</button>

<!-- Tailwind utility-first -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click me
</button>

Core Utility Categories

核心工具类分类

Layout

布局

Display:
```
block
```
,
```
inline-block
```
,
```
flex
```
,
```
grid
```
,
```
hidden
```
Position:
```
static
```
,
```
relative
```
,
```
absolute
```
,
```
fixed
```
,
```
sticky
```

Flexbox:

flex-row

flex-col

justify-center

items-center

gap-4

Grid:

grid-cols-3

grid-rows-2

col-span-2

row-span-1

显示方式：
```
block
```
,
```
inline-block
```
,
```
flex
```
,
```
grid
```
,
```
hidden
```
定位：
```
static
```
,
```
relative
```
,
```
absolute
```
,
```
fixed
```
,
```
sticky
```

Flexbox：

flex-row

flex-col

justify-center

items-center

gap-4

Grid：

grid-cols-3

grid-rows-2

col-span-2

row-span-1

Spacing

间距

Padding:
```
p-4
```
,
```
px-2
```
,
```
py-6
```
,
```
pt-8
```
,
```
pr-3
```
,
```
pb-2
```
,
```
pl-1
```
Margin:
```
m-4
```
,
```
mx-auto
```
,
```
my-6
```
,
```
-mt-4
```
(negative margins)
Space Between:
```
space-x-4
```
,
```
space-y-2
```

内边距：
```
p-4
```
,
```
px-2
```
,
```
py-6
```
,
```
pt-8
```
,
```
pr-3
```
,
```
pb-2
```
,
```
pl-1
```
外边距：
```
m-4
```
,
```
mx-auto
```
,
```
my-6
```
,
```
-mt-4
```
（负外边距）
元素间距：
```
space-x-4
```
,
```
space-y-2
```

Typography

排版

Font Family:
```
font-sans
```
,
```
font-serif
```
,
```
font-mono
```

Font Size:

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

Font Weight:

font-thin

font-normal

font-medium

font-semibold

font-bold

Text Color:
```
text-gray-900
```
,
```
text-blue-500
```
,
```
text-red-600
```

Text Alignment:

text-left

text-center

text-right

text-justify

Line Height:

leading-none

leading-tight

leading-normal

leading-relaxed

字体族：
```
font-sans
```
,
```
font-serif
```
,
```
font-mono
```

字体大小：

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

字重：

font-thin

font-normal

font-medium

font-semibold

font-bold

文本颜色：
```
text-gray-900
```
,
```
text-blue-500
```
,
```
text-red-600
```

文本对齐：

text-left

text-center

text-right

text-justify

行高：

leading-none

leading-tight

leading-normal

leading-relaxed

Colors & Backgrounds

颜色与背景

Background Color:
```
bg-white
```
,
```
bg-gray-100
```
,
```
bg-blue-500
```

Background Gradient:

bg-gradient-to-r from-blue-500 to-purple-600

Opacity:
```
opacity-0
```
,
```
opacity-50
```
,
```
opacity-100
```

背景色：
```
bg-white
```
,
```
bg-gray-100
```
,
```
bg-blue-500
```

背景渐变：

bg-gradient-to-r from-blue-500 to-purple-600

透明度：
```
opacity-0
```
,
```
opacity-50
```
,
```
opacity-100
```

Borders & Shadows

边框与阴影

Border:
```
border
```
,
```
border-2
```
,
```
border-t
```
,
```
border-gray-300
```

Border Radius:

rounded

rounded-lg

rounded-full

rounded-none

Box Shadow:

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

Ring:
```
ring-2
```
,
```
ring-blue-500
```
,
```
ring-offset-2
```

边框：
```
border
```
,
```
border-2
```
,
```
border-t
```
,
```
border-gray-300
```

边框圆角：

rounded

rounded-lg

rounded-full

rounded-none

盒阴影：

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

外发光：
```
ring-2
```
,
```
ring-blue-500
```
,
```
ring-offset-2
```

Effects

视觉效果

Transitions:

transition

transition-all

duration-300

ease-in-out

Transforms:
```
scale-110
```
,
```
rotate-45
```
,
```
translate-x-4
```
,
```
skew-y-3
```

Filters:

blur-sm

brightness-50

contrast-125

grayscale

过渡动画：

transition

transition-all

duration-300

ease-in-out

变换：
```
scale-110
```
,
```
rotate-45
```
,
```
translate-x-4
```
,
```
skew-y-3
```

滤镜：

blur-sm

brightness-50

contrast-125

grayscale

Best Practices

最佳实践

1. Responsive Design with Breakpoints

1. 使用断点实现响应式设计

Use responsive prefixes for different screen sizes:

html

<!-- Mobile-first: stack vertically on small screens, horizontal on medium+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">Column 1</div>
  <div class="w-full md:w-1/2">Column 2</div>
</div>

<!-- Responsive text sizes -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

Breakpoints:

```
sm:
```
- 640px
```
md:
```
- 768px
```
lg:
```
- 1024px
```
xl:
```
- 1280px
```
2xl:
```
- 1536px

为不同屏幕尺寸使用响应式前缀：

html

<!-- Mobile-first: stack vertically on small screens, horizontal on medium+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">Column 1</div>
  <div class="w-full md:w-1/2">Column 2</div>
</div>

<!-- Responsive text sizes -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

断点说明：

```
sm:
```
- 640px
```
md:
```
- 768px
```
lg:
```
- 1024px
```
xl:
```
- 1280px
```
2xl:
```
- 1536px

2. State Variants

2. 状态变体

Apply utilities based on state:

html

<!-- Hover, focus, active states -->
<button class="
  bg-blue-500 hover:bg-blue-700
  text-white
  px-4 py-2 rounded
  transition
  focus:ring-2 focus:ring-blue-300
  active:scale-95
">
  Interactive Button
</button>

<!-- Group hover -->
<div class="group">
  <img class="group-hover:scale-110 transition" src="..." />
  <p class="text-gray-600 group-hover:text-blue-500">
    Hover the parent
  </p>
</div>

根据状态应用工具类：

html

<!-- Hover, focus, active states -->
<button class="
  bg-blue-500 hover:bg-blue-700
  text-white
  px-4 py-2 rounded
  transition
  focus:ring-2 focus:ring-blue-300
  active:scale-95
">
  Interactive Button
</button>

<!-- Group hover -->
<div class="group">
  <img class="group-hover:scale-110 transition" src="..." />
  <p class="text-gray-600 group-hover:text-blue-500">
    Hover the parent
  </p>
</div>

3. Dark Mode

3. 深色模式

Use

dark:

prefix for dark mode styles:

html

<div class="
  bg-white dark:bg-gray-800
  text-gray-900 dark:text-white
  border border-gray-200 dark:border-gray-700
">
  Dark mode compatible content
</div>

使用

dark:

前缀设置深色模式样式：

html

<div class="
  bg-white dark:bg-gray-800
  text-gray-900 dark:text-white
  border border-gray-200 dark:border-gray-700
">
  Dark mode compatible content
</div>

4. Arbitrary Values

4. 自定义值

Use square brackets for one-off custom values:

html

<!-- Custom spacing -->
<div class="mt-[17px] p-[13px]">

<!-- Custom colors -->
<div class="bg-[#1da1f2] text-[rgb(255,100,50)]">

<!-- Custom breakpoints -->
<div class="min-[890px]:flex">

使用方括号定义一次性自定义值：

html

<!-- Custom spacing -->
<div class="mt-[17px] p-[13px]">

<!-- Custom colors -->
<div class="bg-[#1da1f2] text-[rgb(255,100,50)]">

<!-- Custom breakpoints -->
<div class="min-[890px]:flex">

5. Class Organization

5. 类的组织

Order classes logically for readability:

html

<!-- Layout → Spacing → Typography → Colors → Effects -->
<div class="
  flex items-center justify-between
  px-6 py-4
  text-lg font-semibold
  bg-white text-gray-900
  shadow-md rounded-lg
  hover:shadow-xl transition
">

按逻辑顺序排列类以提升可读性：

html

<!-- Layout → Spacing → Typography → Colors → Effects -->
<div class="
  flex items-center justify-between
  px-6 py-4
  text-lg font-semibold
  bg-white text-gray-900
  shadow-md rounded-lg
  hover:shadow-xl transition
">

Examples

示例

Card Component

卡片组件

html

<div class="
  max-w-sm mx-auto
  bg-white rounded-lg shadow-md overflow-hidden
  hover:shadow-xl transition-shadow duration-300
">
  <img
    class="w-full h-48 object-cover"
    src="/image.jpg"
    alt="Card image"
  />
  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-2">
      Card Title
    </h2>
    <p class="text-gray-600 leading-relaxed mb-4">
      Card description goes here with some helpful information.
    </p>
    <button class="
      w-full
      bg-blue-500 hover:bg-blue-600
      text-white font-semibold
      py-2 px-4 rounded
      transition-colors
    ">
      Learn More
    </button>
  </div>
</div>

html

<div class="
  max-w-sm mx-auto
  bg-white rounded-lg shadow-md overflow-hidden
  hover:shadow-xl transition-shadow duration-300
">
  <img
    class="w-full h-48 object-cover"
    src="/image.jpg"
    alt="Card image"
  />
  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-2">
      Card Title
    </h2>
    <p class="text-gray-600 leading-relaxed mb-4">
      Card description goes here with some helpful information.
    </p>
    <button class="
      w-full
      bg-blue-500 hover:bg-blue-600
      text-white font-semibold
      py-2 px-4 rounded
      transition-colors
    ">
      Learn More
    </button>
  </div>
</div>

Responsive Navigation

响应式导航栏

html

<nav class="
  bg-white shadow-lg
  border-b border-gray-200
">
  <div class="
    max-w-7xl mx-auto
    px-4 sm:px-6 lg:px-8
  ">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <h1 class="text-2xl font-bold text-blue-600">Logo</h1>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2 rounded-md text-sm font-medium
          transition-colors
        ">
          Home
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2 rounded-md text-sm font-medium
          transition-colors
        ">
          About
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2 rounded-md text-sm font-medium
          transition-colors
        ">
          Contact
        </a>
      </div>

      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button class="
          text-gray-700 hover:text-blue-600
          p-2
        ">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

html

<nav class="
  bg-white shadow-lg
  border-b border-gray-200
">
  <div class="
    max-w-7xl mx-auto
    px-4 sm:px-6 lg:px-8
  ">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <h1 class="text-2xl font-bold text-blue-600">Logo</h1>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2 rounded-md text-sm font-medium
          transition-colors
        ">
          Home
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2 rounded-md text-sm font-medium
          transition-colors
        ">
          About
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2 rounded-md text-sm font-medium
          transition-colors
        ">
          Contact
        </a>
      </div>

      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button class="
          text-gray-700 hover:text-blue-600
          p-2
        ">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Grid Layout

网格布局

html

<div class="
  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  gap-6
  p-6
">
  <div class="bg-white p-6 rounded-lg shadow">Item 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 3</div>
  <div class="bg-white p-6 rounded-lg shadow col-span-1 md:col-span-2">
    Wide Item
  </div>
  <div class="bg-white p-6 rounded-lg shadow">Item 5</div>
</div>

html

<div class="
  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  gap-6
  p-6
">
  <div class="bg-white p-6 rounded-lg shadow">Item 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 3</div>
  <div class="bg-white p-6 rounded-lg shadow col-span-1 md:col-span-2">
    Wide Item
  </div>
  <div class="bg-white p-6 rounded-lg shadow">Item 5</div>
</div>

Common Patterns

常见模式

Centering Content

内容居中

html

<!-- Flexbox centering -->
<div class="flex items-center justify-center min-h-screen">
  <div>Centered content</div>
</div>

<!-- Grid centering -->
<div class="grid place-items-center min-h-screen">
  <div>Centered content</div>
</div>

<!-- Absolute centering -->
<div class="relative h-screen">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    Centered content
  </div>
</div>

html

<!-- Flexbox centering -->
<div class="flex items-center justify-center min-h-screen">
  <div>Centered content</div>
</div>

<!-- Grid centering -->
<div class="grid place-items-center min-h-screen">
  <div>Centered content</div>
</div>

<!-- Absolute centering -->
<div class="relative h-screen">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    Centered content
  </div>
</div>

Truncating Text

文本截断

html

<!-- Single line truncate -->
<p class="truncate">
  This text will be truncated with an ellipsis if it's too long
</p>

<!-- Multi-line truncate -->
<p class="line-clamp-3">
  This text will be truncated after 3 lines with an ellipsis
</p>

html

<!-- Single line truncate -->
<p class="truncate">
  This text will be truncated with an ellipsis if it's too long
</p>

<!-- Multi-line truncate -->
<p class="line-clamp-3">
  This text will be truncated after 3 lines with an ellipsis
</p>

Aspect Ratios

宽高比

html

<!-- 16:9 aspect ratio -->
<div class="aspect-video bg-gray-200">
  <iframe src="..." class="w-full h-full"></iframe>
</div>

<!-- Square aspect ratio -->
<div class="aspect-square bg-gray-200">
  <img src="..." class="w-full h-full object-cover" />
</div>

html

<!-- 16:9 aspect ratio -->
<div class="aspect-video bg-gray-200">
  <iframe src="..." class="w-full h-full"></iframe>
</div>

<!-- Square aspect ratio -->
<div class="aspect-square bg-gray-200">
  <img src="..." class="w-full h-full object-cover" />
</div>

Anti-Patterns

反模式

❌ Don't Use Inline Styles

❌ 不要使用内联样式

html

<!-- Bad: Mixing inline styles with Tailwind -->
<div class="p-4" style="margin-top: 20px;">
  Content
</div>

<!-- Good: Use Tailwind utilities -->
<div class="p-4 mt-5">
  Content
</div>

html

<!-- Bad: Mixing inline styles with Tailwind -->
<div class="p-4" style="margin-top: 20px;">
  Content
</div>

<!-- Good: Use Tailwind utilities -->
<div class="p-4 mt-5">
  Content
</div>

❌ Don't Create Unnecessary Wrapper Divs

❌ 不要创建不必要的包裹Div

html

<!-- Bad: Extra wrapper for centering -->
<div class="flex justify-center">
  <div class="text-center">
    <h1>Title</h1>
  </div>
</div>

<!-- Good: Direct styling -->
<h1 class="text-center">Title</h1>

html

<!-- Bad: Extra wrapper for centering -->
<div class="flex justify-center">
  <div class="text-center">
    <h1>Title</h1>
  </div>
</div>

<!-- Good: Direct styling -->
<h1 class="text-center">Title</h1>

❌ Don't Overuse Arbitrary Values

❌ 不要过度使用自定义值

html

<!-- Bad: Too many custom values -->
<div class="mt-[17px] mb-[23px] pt-[11px] pb-[19px]">

<!-- Good: Use standard spacing scale -->
<div class="my-6 py-3">

html

<!-- Bad: Too many custom values -->
<div class="mt-[17px] mb-[23px] pt-[11px] pb-[19px]">

<!-- Good: Use standard spacing scale -->
<div class="my-6 py-3">
</div>

❌ Don't Forget Mobile-First

❌ 不要忘记移动优先原则

html

<!-- Bad: Desktop-first approach -->
<div class="w-1/2 sm:w-full">

<!-- Good: Mobile-first approach -->
<div class="w-full sm:w-1/2">

html

<!-- Bad: Desktop-first approach -->
<div class="w-1/2 sm:w-full">

<!-- Good: Mobile-first approach -->
<div class="w-full sm:w-1/2">
</div>

tailwind-utility-classes

Original

Translation

Tailwind CSS - Utility Classes

Tailwind CSS - 工具类

Key Concepts

核心概念

Utility-First Approach

实用优先方法

Core Utility Categories

核心工具类分类

Layout

布局

Spacing

间距

Typography

排版

Colors & Backgrounds

颜色与背景

Borders & Shadows

边框与阴影

Effects

视觉效果

Best Practices

最佳实践

1. Responsive Design with Breakpoints

1. 使用断点实现响应式设计

2. State Variants

2. 状态变体

3. Dark Mode

3. 深色模式

4. Arbitrary Values

4. 自定义值

5. Class Organization

5. 类的组织

Examples

示例

Card Component

卡片组件

Responsive Navigation

响应式导航栏

Grid Layout

网格布局

Common Patterns

常见模式

Centering Content

内容居中

Truncating Text

文本截断

Aspect Ratios

宽高比

Anti-Patterns

反模式

❌ Don't Use Inline Styles

❌ 不要使用内联样式

❌ Don't Create Unnecessary Wrapper Divs

❌ 不要创建不必要的包裹Div

❌ Don't Overuse Arbitrary Values

❌ 不要过度使用自定义值

❌ Don't Forget Mobile-First

❌ 不要忘记移动优先原则

Related Skills

相关技能