Back to Details

tailwind-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS Component Patterns

Tailwind CSS 组件模式

Status: Production Ready ✅ Last Updated: 2026-01-14 Tailwind Compatibility: v3.x and v4.x Source: Production projects, shadcn/ui patterns
状态：可用于生产环境 ✅ 最后更新：2026-01-14 Tailwind 兼容性：v3.x 和 v4.x 来源：生产项目、shadcn/ui 模式

Quick Start

快速开始

Essential Patterns

核心模式

tsx
// Section Container
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
  {/* content */}
</section>

// Card Base
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  {/* content */}
</div>

// Button Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Click me
</button>

// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>
tsx
// Section Container
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
  {/* content */}
</section>

// Card Base
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  {/* content */}
</div>

// Button Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Click me
</button>

// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>

Spacing Scale

间距比例

Consistent spacing prevents design drift:
UsageClassesOutput
Tight spacing
gap-2 p-2 space-y-2
0.5rem (8px)
Standard spacing
gap-4 p-4 space-y-4
1rem (16px)
Comfortable
gap-6 p-6 space-y-6
1.5rem (24px)
Loose
gap-8 p-8 space-y-8
2rem (32px)
Section spacing
py-16 sm:py-24
4rem/6rem (64px/96px)
Standard Pattern: Use increments of 4 (4, 6, 8, 12, 16, 24)
一致的间距可防止设计偏差：
用途类名输出
紧凑间距
gap-2 p-2 space-y-2
0.5rem (8px)
标准间距
gap-4 p-4 space-y-4
1rem (16px)
舒适间距
gap-6 p-6 space-y-6
1.5rem (24px)
宽松间距
gap-8 p-8 space-y-8
2rem (32px)
区块间距
py-16 sm:py-24
4rem/6rem (64px/96px)
标准模式：使用4的增量值（4、6、8、12、16、24）

Responsive Breakpoints

响应式断点

Mobile-first approach (base styles = mobile, add larger breakpoints):
BreakpointMin WidthPatternExample
Base0pxNo prefix
text-base
sm640px
sm:
sm:text-lg
md768px
md:
md:grid-cols-2
lg1024px
lg:
lg:px-8
xl1280px
xl:
xl:max-w-7xl
2xl1536px
2xl:
2xl:text-6xl
tsx
// Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
移动端优先方案（基础样式=移动端，添加更大屏幕的断点）：
断点最小宽度模式示例
基础0px无前缀
text-base
sm640px
sm:
sm:text-lg
md768px
md:
md:grid-cols-2
lg1024px
lg:
lg:px-8
xl1280px
xl:
xl:max-w-7xl
2xl1536px
2xl:
2xl:text-6xl
tsx
// Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Container Patterns

容器模式

Standard Page Container

标准页面容器

tsx
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* content */}
</div>
Variations:
  • max-w-4xl
    - Narrow content (blog posts)
  • max-w-5xl
    - Medium content
  • max-w-6xl
    - Wide content
  • max-w-7xl
    - Full width (default)
tsx
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* content */}
</div>
变体:
  • max-w-4xl
    - 窄内容（博客文章）
  • max-w-5xl
    - 中等内容
  • max-w-6xl
    - 宽内容
  • max-w-7xl
    - 全宽（默认）

Section Spacing

区块间距

tsx
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {/* content */}
  </div>
</section>
tsx
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {/* content */}
  </div>
</section>

Card Patterns

卡片模式

Basic Card

基础卡片

tsx
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  <h3 className="text-lg font-semibold mb-2">Card Title</h3>
  <p className="text-muted-foreground">Card description goes here.</p>
</div>
tsx
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  <h3 className="text-lg font-semibold mb-2">Card Title</h3>
  <p className="text-muted-foreground">Card description goes here.</p>
</div>

Feature Card with Icon

带图标功能卡片

tsx
<div className="bg-card text-card-foreground rounded-lg border border-border p-6 hover:shadow-lg transition-shadow">
  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
    {/* Icon */}
  </div>
  <h3 className="text-lg font-semibold mb-2">Feature Title</h3>
  <p className="text-muted-foreground">Feature description.</p>
</div>
tsx
<div className="bg-card text-card-foreground rounded-lg border border-border p-6 hover:shadow-lg transition-shadow">
  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
    {/* Icon */}
  </div>
  <h3 className="text-lg font-semibold mb-2">Feature Title</h3>
  <p className="text-muted-foreground">Feature description.</p>
</div>

Pricing Card

定价卡片

tsx
<div className="bg-card text-card-foreground rounded-lg border-2 border-border p-8 relative">
  <div className="text-sm font-semibold text-primary mb-2">Pro Plan</div>
  <div className="text-4xl font-bold mb-1">$29<span className="text-lg text-muted-foreground">/mo</span></div>
  <p className="text-muted-foreground mb-6">For growing teams</p>
  <button className="w-full bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90">
    Get Started
  </button>
</div>
See 
references/card-patterns.md
for more variants.
tsx
<div className="bg-card text-card-foreground rounded-lg border-2 border-border p-8 relative">
  <div className="text-sm font-semibold text-primary mb-2">Pro Plan</div>
  <div className="text-4xl font-bold mb-1">$29<span className="text-lg text-muted-foreground">/mo</span></div>
  <p className="text-muted-foreground mb-6">For growing teams</p>
  <button className="w-full bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90">
    Get Started
  </button>
</div>
更多变体请查看 
references/card-patterns.md
。

Grid Layouts

网格布局

Auto-Responsive Grid

自动响应式网格

tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>
tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

Auto-Fit Grid (Dynamic Columns)

自适应网格（动态列数）

tsx
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {/* Automatically adjusts columns based on available space */}
</div>
tsx
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {/* Automatically adjusts columns based on available space */}
</div>

Masonry-Style Grid

瀑布流网格

tsx
<div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
  {items.map(item => (
    <div key={item.id} className="break-inside-avoid">
      <Card {...item} />
    </div>
  ))}
</div>
tsx
<div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
  {items.map(item => (
    <div key={item.id} className="break-inside-avoid">
      <Card {...item} />
    </div>
  ))}
</div>

Button Patterns

按钮模式

tsx
// Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Primary
</button>

// Secondary
<button className="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">
  Secondary
</button>

// Outline
<button className="border border-border bg-transparent px-4 py-2 rounded-md hover:bg-accent">
  Outline
</button>

// Ghost
<button className="bg-transparent px-4 py-2 rounded-md hover:bg-accent hover:text-accent-foreground">
  Ghost
</button>

// Destructive
<button className="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:bg-destructive/90">
  Delete
</button>
Size Variants:
  • Small: 
    px-3 py-1.5 text-sm
  • Default: 
    px-4 py-2
  • Large: 
    px-6 py-3 text-lg
See 
references/button-patterns.md
for full reference.
tsx
// Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Primary
</button>

// Secondary
<button className="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">
  Secondary
</button>

// Outline
<button className="border border-border bg-transparent px-4 py-2 rounded-md hover:bg-accent">
  Outline
</button>

// Ghost
<button className="bg-transparent px-4 py-2 rounded-md hover:bg-accent hover:text-accent-foreground">
  Ghost
</button>

// Destructive
<button className="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:bg-destructive/90">
  Delete
</button>
尺寸变体:
  • 小尺寸: 
    px-3 py-1.5 text-sm
  • 默认: 
    px-4 py-2
  • 大尺寸: 
    px-6 py-3 text-lg
完整参考请查看 
references/button-patterns.md
。

Form Patterns

表单模式

Input Field

输入框

tsx
<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    Email
  </label>
  <input
    id="email"
    type="email"
    className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
    placeholder="you@example.com"
  />
</div>
tsx
<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    Email
  </label>
  <input
    id="email"
    type="email"
    className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
    placeholder="you@example.com"
  />
</div>

Select Dropdown

下拉选择框

tsx
<select className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
tsx
<select className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Checkbox

复选框

tsx
<div className="flex items-center space-x-2">
  <input
    id="terms"
    type="checkbox"
    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
  />
  <label htmlFor="terms" className="text-sm">
    I agree to the terms
  </label>
</div>
tsx
<div className="flex items-center space-x-2">
  <input
    id="terms"
    type="checkbox"
    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
  />
  <label htmlFor="terms" className="text-sm">
    I agree to the terms
  </label>
</div>

Error State

错误状态

tsx
<div className="space-y-2">
  <label htmlFor="password" className="text-sm font-medium">
    Password
  </label>
  <input
    id="password"
    type="password"
    className="w-full px-3 py-2 bg-background border border-destructive rounded-md focus:outline-none focus:ring-2 focus:ring-destructive"
  />
  <p className="text-sm text-destructive">Password must be at least 8 characters</p>
</div>
See 
references/form-patterns.md
for complete patterns.
tsx
<div className="space-y-2">
  <label htmlFor="password" className="text-sm font-medium">
    Password
  </label>
  <input
    id="password"
    type="password"
    className="w-full px-3 py-2 bg-background border border-destructive rounded-md focus:outline-none focus:ring-2 focus:ring-destructive"
  />
  <p className="text-sm text-destructive">Password must be at least 8 characters</p>
</div>
完整模式请查看 
references/form-patterns.md
。

Typography Patterns

排版模式

Headings

标题

tsx
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold">
  Page Title
</h1>

<h2 className="text-3xl sm:text-4xl font-bold">
  Section Title
</h2>

<h3 className="text-2xl sm:text-3xl font-semibold">
  Subsection
</h3>

<h4 className="text-xl font-semibold">
  Card Title
</h4>
tsx
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold">
  Page Title
</h1>

<h2 className="text-3xl sm:text-4xl font-bold">
  Section Title
</h2>

<h3 className="text-2xl sm:text-3xl font-semibold">
  Subsection
</h3>

<h4 className="text-xl font-semibold">
  Card Title
</h4>

Body Text

正文文本

tsx
<p className="text-base text-muted-foreground">
  Regular paragraph text.
</p>

<p className="text-lg text-muted-foreground leading-relaxed">
  Larger body text with comfortable line height.
</p>

<p className="text-sm text-muted-foreground">
  Small supporting text or captions.
</p>
tsx
<p className="text-base text-muted-foreground">
  Regular paragraph text.
</p>

<p className="text-lg text-muted-foreground leading-relaxed">
  Larger body text with comfortable line height.
</p>

<p className="text-sm text-muted-foreground">
  Small supporting text or captions.
</p>

Lists

列表

tsx
<ul className="space-y-2 text-muted-foreground">
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature one</span>
  </li>
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature two</span>
  </li>
</ul>
See 
references/typography-patterns.md
for complete guide.
tsx
<ul className="space-y-2 text-muted-foreground">
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature one</span>
  </li>
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature two</span>
  </li>
</ul>
完整指南请查看 
references/typography-patterns.md
。

Navigation Patterns

导航模式

Header with Logo

带Logo的头部

tsx
<header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="flex h-16 items-center justify-between">
      <div className="flex items-center gap-8">
        {/* Logo */}
        <a href="/" className="font-bold text-xl">Brand</a>

        {/* Desktop Nav */}
        <nav className="hidden md:flex gap-6">
          <a href="#" className="text-sm hover:text-primary transition-colors">Features</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">Pricing</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">About</a>
        </nav>
      </div>

      {/* CTA */}
      <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
        Sign Up
      </button>
    </div>
  </div>
</header>
tsx
<header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="flex h-16 items-center justify-between">
      <div className="flex items-center gap-8">
        {/* Logo */}
        <a href="/" className="font-bold text-xl">Brand</a>

        {/* Desktop Nav */}
        <nav className="hidden md:flex gap-6">
          <a href="#" className="text-sm hover:text-primary transition-colors">Features</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">Pricing</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">About</a>
        </nav>
      </div>

      {/* CTA */}
      <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
        Sign Up
      </button>
    </div>
  </div>
</header>

Footer

页脚

tsx
<footer className="border-t border-border bg-muted/50">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div>
        <h4 className="font-semibold mb-4">Product</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li><a href="#" className="hover:text-primary">Features</a></li>
          <li><a href="#" className="hover:text-primary">Pricing</a></li>
        </ul>
      </div>
      {/* More columns */}
    </div>
  </div>
</footer>
See 
references/navigation-patterns.md
for mobile menus and dropdowns.
tsx
<footer className="border-t border-border bg-muted/50">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div>
        <h4 className="font-semibold mb-4">Product</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li><a href="#" className="hover:text-primary">Features</a></li>
          <li><a href="#" className="hover:text-primary">Pricing</a></li>
        </ul>
      </div>
      {/* More columns */}
    </div>
  </div>
</footer>
移动端菜单和下拉菜单请查看 
references/navigation-patterns.md
。

Dark Mode Support

深色模式支持

All patterns use semantic color tokens that automatically adapt:
TokenLight ModeDark Mode
bg-background
WhiteDark gray
text-foreground
Dark grayWhite
bg-card
WhiteSlightly lighter gray
text-muted-foreground
GrayLight gray
border-border
Light grayDark gray
bg-primary
Brand colorLighter brand color
Never use raw colors like 
bg-blue-500
- always use semantic tokens.
See 
references/dark-mode-patterns.md
for theme toggle implementation.
所有模式均使用语义化颜色令牌，可自动适配：
令牌浅色模式深色模式
bg-background
白色深灰色
text-foreground
深灰色白色
bg-card
白色浅灰色
text-muted-foreground
灰色浅灰色
border-border
浅灰色深灰色
bg-primary
品牌色浅品牌色
切勿使用原始颜色，例如
bg-blue-500
- 请始终使用语义化令牌。
主题切换实现请查看 
references/dark-mode-patterns.md
。

Common Class Combinations

常用类组合

Section with Heading

带标题的区块

tsx
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 className="text-3xl sm:text-4xl font-bold text-center mb-12">
      Section Title
    </h2>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* content */}
    </div>
  </div>
</section>
tsx
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 className="text-3xl sm:text-4xl font-bold text-center mb-12">
  Section Title
    </h2>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* content */}
    </div>
  </div>
</section>

Centered Content

居中内容

tsx
<div className="flex flex-col items-center justify-center text-center">
  <h1 className="text-4xl font-bold mb-4">Centered Title</h1>
  <p className="text-muted-foreground max-w-2xl">Centered description</p>
</div>
tsx
<div className="flex flex-col items-center justify-center text-center">
  <h1 className="text-4xl font-bold mb-4">Centered Title</h1>
  <p className="text-muted-foreground max-w-2xl">Centered description</p>
</div>

Hover Effects

悬停效果

tsx
// Lift on hover
<div className="transition-transform hover:scale-105">

// Shadow on hover
<div className="transition-shadow hover:shadow-lg">

// Color change on hover
<button className="transition-colors hover:bg-primary/90">
tsx
// Lift on hover
<div className="transition-transform hover:scale-105">

// Shadow on hover
<div className="transition-shadow hover:shadow-lg">

// Color change on hover
<button className="transition-colors hover:bg-primary/90">

Critical Rules

关键规则

✅ Always Do

✅ 始终遵循

  1. Use semantic color tokens (
    bg-card
    , 
    text-foreground
    )
  2. Apply mobile-first responsive design (
    base → sm: → md:
    )
  3. Use consistent spacing scale (4, 6, 8, 12, 16, 24)
  4. Add 
    transition-*
    classes for smooth interactions
  5. Test in both light and dark modes
  1. 使用语义化颜色令牌（
    bg-card
    、
    text-foreground
    ）
  2. 采用移动端优先的响应式设计（
    base → sm: → md:
    ）
  3. 使用一致的间距比例（4、6、8、12、16、24）
  4. 添加
    transition-*
    类实现平滑交互
  5. 在浅色和深色模式下均进行测试

❌ Never Do

❌ 切勿操作

  1. Use raw Tailwind colors (
    bg-blue-500
    breaks themes)
  2. Skip responsive prefixes (mobile users suffer)
  3. Mix spacing scales randomly (creates visual chaos)
  4. Forget hover states on interactive elements
  5. Use fixed px values for text (
    text-base
    not 
    text-[16px]
    )
  1. 使用原始Tailwind颜色（
    bg-blue-500
    会破坏主题）
  2. 跳过响应式前缀（移动端用户体验受损）
  3. 随机混合间距比例（造成视觉混乱）
  4. 交互式元素遗漏悬停状态
  5. 使用固定px值设置文本（使用
    text-base
    而非
    text-[16px]
    ）

Template Components

模板组件

Ready-to-use components in 
templates/components/
:
  • hero-section.tsx - Responsive hero with CTA
  • feature-grid.tsx - 3-column feature grid with icons
  • contact-form.tsx - Full form with validation styles
  • footer.tsx - Multi-column footer with links
Copy and customize for your project.
templates/components/
目录下的即用型组件：
  • hero-section.tsx - 带CTA的响应式头部
  • feature-grid.tsx - 带图标的3列功能网格
  • contact-form.tsx - 带验证样式的完整表单
  • footer.tsx - 带链接的多列页脚
可直接复制并根据项目需求自定义。

Reference Documentation

参考文档

Detailed patterns in 
references/
directory:
  • layout-patterns.md - Containers, grids, flexbox layouts
  • card-patterns.md - All card variants and states
  • navigation-patterns.md - Headers, menus, breadcrumbs, footers
  • form-patterns.md - Complete form styling guide
  • button-patterns.md - All button variants and sizes
  • typography-patterns.md - Text styles and hierarchies
  • dark-mode-patterns.md - Theme switching implementation
references/
目录下的详细模式：
  • layout-patterns.md - 容器、网格、Flexbox布局
  • card-patterns.md - 所有卡片变体和状态
  • navigation-patterns.md - 头部、菜单、面包屑、页脚
  • form-patterns.md - 完整表单样式指南
  • button-patterns.md - 所有按钮变体和尺寸
  • typography-patterns.md - 文本样式和层级
  • dark-mode-patterns.md - 主题切换实现

Official Documentation

官方文档

Last Updated: 2026-01-14 Skill Version: 1.0.0 Production: Tested across 10+ projects
最后更新：2026-01-14 技能版本：1.0.0 生产验证：已在10+项目中测试