Skills

tailwind-patterns

Installation
Summary

Production-ready Tailwind CSS patterns for responsive layouts, cards, forms, buttons, and navigation.

  • Includes semantic color tokens for automatic light/dark mode support, eliminating raw color usage that breaks themes
  • Covers mobile-first responsive design with six breakpoints (base, sm, md, lg, xl, 2xl) and consistent spacing scale (4, 6, 8, 12, 16, 24)
  • Provides ready-to-use component patterns for headers, footers, grids, cards, buttons, forms, and typography with hover states and transitions
  • References detailed guides for layout, navigation, form validation styles, and theme switching implementation
SKILL.md

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

More from jezweb/claude-skills

Installs
1.1K
Repository
jezweb/claude-skills
GitHub Stars
776
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass