Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i jezweb/claude-skills/skills/tailwind-patternsMethod 2 - openskills (supports sync & update)
npx openskills install jezweb/claude-skillsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
Environment setup included
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 |
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 |
| lg | 1024px |
// 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.</
<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
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
<
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=
<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"
/>
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
<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
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">
{
<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>
<
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 |
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 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
| 4rem/6rem (64px/96px) |
lg: |
lg:px-8 |
| xl | 1280px | xl: | xl:max-w-7xl |
| 2xl | 1536px | 2xl: | 2xl:text-6xl |
| Dark gray |
bg-primary | Brand color | Lighter brand color |