Tailwind CSS 组件模式库 - 生产就绪的响应式UI设计模式与最佳实践

tailwind-patterns by srbhr/resume-matcher

159 周安装量

26,400 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/srbhr/resume-matcher --skill tailwind-patterns

UI组件库 CSS 开发

🇨🇳中文介绍

Tailwind CSS 组件模式

状态 : 生产就绪 ✅ 最后更新 : 2026-01-14 Tailwind 兼容性 : v3.x 和 v4.x 来源 : 生产项目，shadcn/ui 模式

快速开始

基本模式

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

// 卡片基础
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  {/* content */}
</div>

// 主要按钮
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  点击我
</button>

// 响应式网格
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>

间距尺度

一致的间距可防止设计偏差：

用途	类名	输出
紧凑间距	`gap-2 p-2 space-y-2`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

断点	最小宽度	模式	示例
基础	0px	无前缀	`text-base`
sm	640px	`sm:`	`sm:text-lg`
md	768px	`md:`	`md:grid-cols-2`
lg	1024px	`lg:`	`lg:px-8`
xl	1280px	`xl:`	`xl:max-w-7xl`
2xl	1536px	`2xl:`	`2xl:text-6xl`

带图标的特性卡片

<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">特性标题</h3>
  <p className="text-muted-foreground">特性描述。</p>
</div>

<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">专业版计划</div>
  <div className="text-4xl font-bold mb-1">$29<span className="text-lg text-muted-foreground">/月</span></div>
  <p className="text-muted-foreground mb-6">适用于成长中的团队</p>
  <button className="w-full bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90">
    开始使用
  </button>
</div>

更多变体请参见 references/card-patterns.md。

自动响应式网格

<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>

自适应网格（动态列）

<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {/* 根据可用空间自动调整列数 */}
</div>

<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 className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  主要
</button>

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

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

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

// 危险
<button className="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:bg-destructive/90">
  删除
</button>

小: px-3 py-1.5 text-sm
默认: px-4 py-2
大: px-6 py-3 text-lg

完整参考请参见 references/button-patterns.md。

<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    邮箱
  </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 className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
  <option>选项 1</option>
  <option>选项 2</option>
</select>

<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">
    我同意条款
  </label>
</div>

<div className="space-y-2">
  <label htmlFor="password" className="text-sm font-medium">
    密码
  </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">密码必须至少 8 个字符</p>
</div>

完整模式请参见 references/form-patterns.md。

<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold">
  页面标题
</h1>

<h2 className="text-3xl sm:text-4xl font-bold">
  区域标题
</h2>

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

<h4 className="text-xl font-semibold">
  卡片标题
</h4>

<p className="text-base text-muted-foreground">
  常规段落文本。
</p>

<p className="text-lg text-muted-foreground leading-relaxed">
  较大的正文文本，具有舒适的行高。
</p>

<p className="text-sm text-muted-foreground">
  小的辅助文本或说明文字。
</p>

<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>特性一</span>
  </li>
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>特性二</span>
  </li>
</ul>

完整指南请参见 references/typography-patterns.md。

<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">品牌</a>

        {/* 桌面端导航 */}
        <nav className="hidden md:flex gap-6">
          <a href="#" className="text-sm hover:text-primary transition-colors">特性</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">定价</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">关于</a>
        </nav>
      </div>

      {/* 行动号召 */}
      <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
        注册
      </button>
    </div>
  </div>
</header>

<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">产品</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li><a href="#" className="hover:text-primary">特性</a></li>
          <li><a href="#" className="hover:text-primary">定价</a></li>
        </ul>
      </div>
      {/* 更多列 */}
    </div>
  </div>
</footer>

移动端菜单和下拉菜单请参见 references/navigation-patterns.md。

所有模式都使用能自动适应的语义化颜色标记：

标记	浅色模式	深色模式
`bg-background`	白色	深灰色
`text-foreground`	深灰色	白色
`bg-card`	白色	稍浅的灰色
`text-muted-foreground`	灰色	浅灰色
`border-border`	浅灰色	深灰色
`bg-primary`	品牌色	较浅的品牌色

切勿使用原始颜色，如 bg-blue-500 - 始终使用语义化标记。

主题切换实现请参见 references/dark-mode-patterns.md。

<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">
      区域标题
    </h2>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* content */}
    </div>
  </div>
</section>

<div className="flex flex-col items-center justify-center text-center">
  <h1 className="text-4xl font-bold mb-4">居中标题</h1>
  <p className="text-muted-foreground max-w-2xl">居中描述</p>
</div>

// 悬停时上浮
<div className="transition-transform hover:scale-105">

// 悬停时阴影
<div className="transition-shadow hover:shadow-lg">

// 悬停时颜色变化
<button className="transition-colors hover:bg-primary/90">

使用语义化颜色标记 (bg-card, text-foreground)
应用移动优先的响应式设计 (基础 → sm: → md:)
使用一致的间距尺度 (4, 6, 8, 12, 16, 24)
为平滑交互添加 transition-* 类
在浅色和深色模式下都进行测试

使用原始的 Tailwind 颜色 (bg-blue-500 会破坏主题)
跳过响应式前缀（移动端用户会遭殃）
随意混合间距尺度（会造成视觉混乱）
忘记为交互元素添加悬停状态
为文本使用固定的 px 值 (text-base 而非 text-[16px])

templates/components/ 中现成的组件：

hero-section.tsx - 带行动号召的响应式英雄区域
feature-grid.tsx - 带图标的 3 列特性网格
contact-form.tsx - 带验证样式的完整表单
footer.tsx - 带链接的多列页脚

复制并自定义以用于你的项目。

Resume Matcher 设计系统（瑞士国际风格）

本项目使用**瑞士国际风格（粗野主义）**设计。项目特定模式：

style-guide.md - 核心瑞士风格规则、颜色、排版
design-system.md - 扩展间距、阴影、标记
swiss-design-system-prompt.md - 用于生成瑞士风格 UI 的 AI 提示

关键瑞士风格覆盖：

// 无圆角 - 使用 rounded-none
<button className="rounded-none border-2 border-black">

// 硬阴影而非软阴影
<div className="shadow-[4px_4px_0px_0px_#000000]">

// 悬停：移动到阴影空间
<button className="hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

瑞士调色板：

颜色	十六进制	用途
画布	`#F0F0E8`	背景
墨水	`#000000`	文本、边框
超链接蓝	`#1D4ED8`	主要操作
信号绿	`#15803D`	成功
警告橙	`#F97316`	警告
警告红	`#DC2626`	危险

Tailwind CSS : https://tailwindcss.com/docs

最后更新 : 2026-01-14 技能版本 : 1.0.0 生产环境 : 已在 10+ 项目中测试

🇺🇸English

Tailwind CSS Component Patterns

Status : Production Ready ✅ Last Updated : 2026-01-14 Tailwind Compatibility : v3.x and v4.x Source : Production projects, shadcn/ui patterns

Quick Start

Essential Patterns

// 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:

Usage	Classes	Output
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)

Responsive Breakpoints

Mobile-first approach (base styles = mobile, add larger breakpoints):

Breakpoint	Min Width	Pattern	Example
Base	0px	No prefix	`text-base`
sm	640px	`sm:`	`sm:text-lg`
md	768px	`md:`	`md:grid-cols-2`

// 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

<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)

Section Spacing

<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

<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

<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

<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.

Grid Layouts

Auto-Responsive Grid

<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)

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

Masonry-Style Grid

<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

// 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.

Form Patterns

Input Field

<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

<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

<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

<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.

Typography Patterns

Headings

<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

<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

<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.

Navigation Patterns

Header with Logo

<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

<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.

Dark Mode Support

All patterns use semantic color tokens that automatically adapt:

Token	Light Mode	Dark Mode
`bg-background`	White	Dark gray
`text-foreground`	Dark gray	White
`bg-card`	White	Slightly lighter gray
`text-muted-foreground`	Gray	Light gray
`border-border`	Light gray	Dark gray

Never use raw colors like bg-blue-500 - always use semantic tokens.

See references/dark-mode-patterns.md for theme toggle implementation.

Common Class Combinations

Section with Heading

<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

<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

// 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

Use semantic color tokens (bg-card, text-foreground)
Apply mobile-first responsive design (base → sm: → md:)
Use consistent spacing scale (4, 6, 8, 12, 16, 24)
Add transition-* classes for smooth interactions
Test in both light and dark modes

❌ Never Do

Use raw Tailwind colors (bg-blue-500 breaks themes)
Skip responsive prefixes (mobile users suffer)
Mix spacing scales randomly (creates visual chaos)
Forget hover states on interactive elements
Use fixed px values for text (text-base not 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.

Reference Documentation

Resume Matcher Design System (Swiss International Style)

This project uses Swiss International Style (Brutalist) design. For project-specific patterns:

style-guide.md - Core Swiss style rules, colors, typography
design-system.md - Extended spacing, shadows, tokens
swiss-design-system-prompt.md - AI prompt for generating Swiss-style UI

Key Swiss Style Overrides:

// NO rounded corners - use rounded-none
<button className="rounded-none border-2 border-black">

// Hard shadows instead of soft
<div className="shadow-[4px_4px_0px_0px_#000000]">

// Hover: translate into shadow space
<button className="hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

Swiss Color Palette:

Color	Hex	Usage
Canvas	`#F0F0E8`	Background
Ink	`#000000`	Text, borders
Hyper Blue	`#1D4ED8`	Primary actions
Signal Green	`#15803D`	Success
Alert Orange	`#F97316`	Warning
Alert Red

Official Documentation

Tailwind CSS : https://tailwindcss.com/docs

Last Updated : 2026-01-14 Skill Version : 1.0.0 Production : Tested across 10+ projects

Weekly Installs

159

Repository

srbhr/resume-matcher

GitHub Stars

26.4K

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode130

gemini-cli127

codex120

github-copilot118

amp99

cursor99

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

113,700 周安装

Tailwind CSS 组件模式库 - 生产就绪的响应式UI设计模式与最佳实践

🇨🇳中文介绍

Tailwind CSS 组件模式

快速开始

基本模式

间距尺度

相关 Skills

响应式断点

容器模式

标准页面容器

区域间距

卡片模式

基础卡片

带图标的特性卡片

定价卡片

网格布局

自动响应式网格

自适应网格（动态列）

瀑布流式网格

按钮模式

表单模式

输入字段

选择下拉框

复选框

错误状态

排版模式

标题

正文文本

列表

导航模式

带 Logo 的页眉

页脚

深色模式支持

常用类组合

带标题的区域

居中内容

悬停效果

关键规则

✅ 务必做到

❌ 切勿做到

模板组件

参考文档