tailwind-patterns

skill:tailwind-patterns - Production Tailwind CSS Patterns

Version: 1.0.0

Purpose

Provide production-ready Tailwind CSS patterns for common website components. This skill covers responsive layouts, cards, navigation, forms, buttons, typography, spacing, and dark mode with mobile-first approach. It integrates with shadcn/ui, Radix, and Headless UI component libraries. Use when building UI components with Tailwind, setting up a design system, or converting designs to responsive Tailwind markup.

File Structure

skills/tailwind-patterns/ ├── SKILL.md (this file) └── examples.md

Interface References

Context: Loaded via ContextProvider Interface
Memory: Accessed via MemoryStore Interface
Shared Patterns: Shared Loading Patterns
Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json

Tailwind Pattern Focus Areas

Responsive Layouts: Flexbox and Grid patterns with mobile-first breakpoints (sm: , md: , lg: , xl: , 2xl: )
Component Patterns: Cards, navigation bars, sidebars, modals, dropdowns, tables, and forms
Typography System: Font scale, line heights, letter spacing, prose for content
Spacing & Sizing: Consistent use of the spacing scale (p-4 , m-6 , gap-8 ), avoiding arbitrary values
Color System: Design tokens via CSS custom properties, semantic colors (primary , muted , destructive )
Dark Mode: dark: variant with class-based toggling, smooth transitions
State Variants: Hover, focus, active, disabled, group-hover, peer states
shadcn/ui Integration: Component composition, variant props via cva , cn() utility

Tailwind Core Rules

Mobile-first: Write base styles for mobile, then add breakpoint prefixes for larger screens
Spacing scale: Use Tailwind's spacing scale — avoid arbitrary values (p-[13px] ) unless necessary
Semantic classes: Use text-foreground , bg-background , border-border from design tokens
No @apply abuse: Prefer utility classes in markup; use @apply only for base styles or third-party overrides
Component extraction: Extract repeated patterns into React components, not @apply classes
Container queries: Use @container for component-level responsive design
Logical properties: Prefer ps-4 /pe-4 over pl-4 /pr-4 for RTL support

MANDATORY WORKFLOW (MUST FOLLOW EXACTLY)

Step 1: Initial Analysis

YOU MUST:

Identify the Tailwind version (v3.x or v4.x) and configuration
Detect the component library (shadcn/ui, Radix, Headless UI, DaisyUI, or custom)
Determine the scope:
Single component implementation
Page layout
Design system setup
Responsive refactoring
Check for existing tailwind.config.ts customizations (colors, fonts, breakpoints)
Identify if dark mode is required and the strategy (class-based, media query, or system)
Ask clarifying questions:
Design reference or mockup available?
Breakpoint requirements?
RTL support needed?

Step 2: Load Memory

Follow Standard Memory Loading with skill="tailwind-patterns" and domain="engineering" .

YOU MUST:

Use memoryStore.getSkillMemory("tailwind-patterns", "{project-name}") to load project patterns
Use memoryStore.getByProject("{project-name}") for cross-skill context (design tokens, color palette)
Review previously documented component patterns, custom utilities, and design decisions

Step 3: Load Context

Follow Standard Context Loading for the engineering domain. Stay within the file budget declared in frontmatter.

Step 4: Implement Tailwind Patterns

YOU MUST follow these patterns:

Responsive Layout (Mobile-First):

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

Card Component with Variants (cva + cn):

import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils"

const cardVariants = cva( "rounded-lg border bg-card text-card-foreground shadow-sm", { variants: { size: { sm: "p-4", md: "p-6", lg: "p-8", }, }, defaultVariants: { size: "md" }, } )

interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {}

export function Card({ className, size, ...props }: CardProps) { return <div className={cn(cardVariants({ size }), className)} {...props} /> }

Button with States:

<button className=" inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 transition-colors "> Submit </button>

Dark Mode:

<div className="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50"> <p className="text-gray-600 dark:text-gray-400">Subtitle text</p> </div>

Form Input:

<div className="space-y-2"> <label htmlFor="email" className="text-sm font-medium leading-none"> Email </label> <input id="email" type="email" className=" flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " placeholder="you@example.com" /> </div>

Rules:

Mobile-first: Base classes for mobile, add md: , lg: for larger screens
Use design token colors (primary , muted , destructive ) not raw colors in components
Use focus-visible: not focus: for keyboard-only focus indicators
Use transition-colors or transition-all for smooth state changes
Group related utility classes logically (layout → spacing → typography → colors → states)

DO NOT use arbitrary values when a Tailwind scale value exists

Step 5: Generate Output

Save to /claudedocs/tailwind-patterns_{project}_{YYYY-MM-DD}.md
Follow naming conventions in ../OUTPUT_CONVENTIONS.md
Include component code, Tailwind config changes, and utility setup

Step 6: Update Memory

Follow Standard Memory Update for skill="tailwind-patterns" .

Store design tokens, component patterns, custom utilities, breakpoint decisions, and dark mode strategy.

Compliance Checklist

Before completing, verify:

Step 1: Tailwind version, component library, and scope identified
Step 2: Standard Memory Loading pattern followed
Step 3: Standard Context Loading pattern followed
Step 4: Tailwind patterns implemented with mobile-first, design tokens, and proper state variants
Step 5: Output saved with standard naming convention
Step 6: Standard Memory Update pattern followed

tailwind-patterns

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

office

accessibility

jquery-4