Tailwind Patterns
A solid collection of copy-paste Tailwind patterns that covers the stuff you build repeatedly: responsive containers, card layouts, form styles, buttons with proper hover states. The semantic color token system is the standout here, it handles light/dark mode automatically so you're not sprinkling dark: prefixes everywhere or breaking themes with hardcoded colors. Follows mobile-first with the standard six breakpoints and includes navigation, headers, footers, and grid patterns. Works with both Tailwind v3 and v4, pulled from real production code and shadcn/ui patterns. Best used when you're starting a new project or need consistent component scaffolding without reinventing spacing and responsive behavior every time.
- skills.sh installs
- 1.1K
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add jezweb/claude-skills --skill tailwind-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
A solid collection of copy-paste Tailwind patterns that covers the stuff you build repeatedly: responsive containers, card layouts, form styles, buttons with proper hover states. The semantic color token system is the standout here, it handles light/dark mode automatically so you're not sprinkling dark: prefixes everywhere or breaking themes with hardcoded colors. Follows mobile-first with the standard six breakpoints and includes navigation, headers, footers, and grid patterns. Works with both Tailwind v3 and v4, pulled from real production code and shadcn/ui patterns. Best used when you're starting a new project or need consistent component scaffolding without reinventing spacing and responsive behavior every time.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/jezweb/claude-skills
- Categories
- Frontend Development, Mobile Development, Design & UI/UX
More from jezweb/claude-skills
All 166- Uk Business English1.1K
- App Docs1.1K
- Gws Setup1.1K
- Product Showcase1.1K
- Gws Install1.1K
- Strategy Document1.1K
- Team Update1K
- Us Business English1K
- Nextjs1K
- Design Loop1K
- Cloudflare Api997
- Parcel Tracking996
- Db Seed981
- Award Application971
- Nz Business English933
- Fork Discipline905
- Nemoclaw Setup902
- Motion785
- React Native Expo738
- Ux Extract687
- Ux Compare663
- Drizzle Orm D1640
- Hono Routing615
- Project Planning577
Recommended
More Frontend Development
ui-design-systemalirezarezvani/claude-skillsUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof1.1Kskills.sh installs
capacitor-vuecapawesome-team/skillsGuides the agent through Vue-specific patterns for Capacitor app development. Covers Vue 3 Composition API with Capacitor plugins, custom composables for native1.1Kskills.sh installs
nextjsjezweb/claude-skillsBuild Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prev1Kskills.sh installsionic-reactcapawesome-team/skillsGuides the agent through Ionic Framework development with React — project structure, React-specific Ionic components, IonReactRouter and navigation patterns, Io1Kskills.sh installs
tailwind-best-practicesasyrafhussin/agent-skillsTailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or1Kskills.sh installs
zustand-state-managementmindrally/skillsBest practices for Zustand state management in React and Next.js applications with TypeScript.993skills.sh installs