tailwind-css-patterns
Installation
Summary
Utility-first CSS framework patterns for responsive, component-based styling with Tailwind v4.1+.
- Covers responsive design with mobile-first breakpoints, flexbox/grid layouts, spacing scales, typography, colors, and interactive states
- Includes CSS-first configuration via
@themedirective, custom utilities, and container queries for modern styling workflows - Provides 10+ component patterns (cards, navigation, forms, modals) with accessibility guidelines and dark mode support
- Supports React/Vue/Svelte integration with practical examples for extracting reusable styled components
SKILL.md
Tailwind CSS Development Patterns
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Overview
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
When to Use
- Styling React/Vue/Svelte components
- Building responsive layouts and grids
- Implementing design systems
- Adding dark mode support
- Optimizing CSS workflow