tailwind-patterns
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
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>
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.6Ktanstack-query
|
2.5Ktailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
2.3Kfastapi
|
2.0Kcolor-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
1.9K