tailwind-patterns by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-patterns状态 : 生产就绪 ✅ 最后更新 : 2026-01-14 Tailwind 兼容性 : v3.x 和 v4.x 来源 : 生产项目,shadcn/ui 模式
// 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>
一致的间距可防止设计偏差:
| 用途 | 类名 | 输出 |
|---|---|---|
| 紧凑间距 | gap-2 p-2 space-y-2 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 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)
移动优先方法(基础样式 = 移动端,添加更大的断点):
| 断点 | 最小宽度 | 模式 | 示例 |
|---|---|---|---|
| 基础 | 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 |
// 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">
<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 className="py-16 sm:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* content */}
</div>
</section>
<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>
<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>
<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。
<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">
{/* Automatically adjusts columns based on available space */}
</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>
// 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-smpx-4 py-2px-6 py-3 text-lg完整参考请参阅 references/button-patterns.md。
<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 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>
<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>
<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。
<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>
<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>
<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。
<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 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。
所有模式都使用自动适配的语义化颜色标记:
| 标记 | 浅色模式 | 深色模式 |
|---|---|---|
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">
Section Title
</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">Centered Title</h1>
<p className="text-muted-foreground max-w-2xl">Centered description</p>
</div>
// 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">
bg-card、text-foreground)基础 → sm: → md:)transition-* 类bg-blue-500 会破坏主题)text-base 而不是 text-[16px])templates/components/ 中的即用型组件:
复制并根据您的项目进行自定义。
references/ 目录中的详细模式:
最后更新 : 2026-01-14 技能版本 : 1.0.0 生产环境 : 已在 10+ 个项目中进行测试
每周安装量
1.1K
代码仓库
GitHub 星标数
643
首次出现
2026年1月20日
安全审计
安装于
claude-code838
opencode783
gemini-cli735
codex703
cursor639
github-copilot620
Status : Production Ready ✅ Last Updated : 2026-01-14 Tailwind Compatibility : v3.x and v4.x Source : Production projects, shadcn/ui 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>
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)
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">
<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 contentmax-w-6xl - Wide contentmax-w-7xl - Full width (default)<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>
<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>
<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>
<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.
<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">
{/* Automatically adjusts columns based on available space */}
</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>
// 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 :
px-3 py-1.5 text-smpx-4 py-2px-6 py-3 text-lgSee references/button-patterns.md for full reference.
<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 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>
<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>
<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.
<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>
<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>
<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.
<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 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.
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.
<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>
<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>
// 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">
bg-card, text-foreground)base → sm: → md:)transition-* classes for smooth interactionsbg-blue-500 breaks themes)text-base not text-[16px])Ready-to-use components in templates/components/:
Copy and customize for your project.
Detailed patterns in references/ directory:
Last Updated : 2026-01-14 Skill Version : 1.0.0 Production : Tested across 10+ projects
Weekly Installs
1.1K
Repository
GitHub Stars
643
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code838
opencode783
gemini-cli735
codex703
cursor639
github-copilot620
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
| 1024px |
lg: |
lg:px-8 |
| xl | 1280px | xl: | xl:max-w-7xl |
| 2xl | 1536px | 2xl: | 2xl:text-6xl |
bg-primary | Brand color | Lighter brand color |