tailwindcss-advanced-layouts
Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2) grid-template-areas via Tailwind v4 arbitrary values, (3) responsive grid (grid-cols-*, auto-fit, minmax), (4) Flexbox patterns (flex-1, flex-gro
By josiahsiegel · 8,005 installs
npx skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-layouts
Source repository · Upstream listing
Tailwind CSS Advanced Layout Techniques
CSS Grid Mastery
Complex Grid Layouts
Grid Template Areas
Auto Fill and Auto Fit Grids
Subgrid
Advanced Flexbox Patterns
Space Distribution
Flexible Item Sizing
Masonry Like with Flexbox
Container Queries
Basic Container Queries
Named Containers
Container Query Units
Position and Layering
Sticky Positioning
Fixed Elements
Z Index Management
Overflow and Scrolling
Custom Scrollbars
Scroll Snap
Scroll Margin for Anchors
Aspect Ratio and Object Fit
Responsive Aspect Ratios
Object Positioning
Advanced Spacing
Logical Properties
Space Between with Dividers
Negative Margins for Bleeds
Multi Column Layout
Text Columns
Responsive Patterns
Container Queries + Media Queries
Breakpoint Based Visibility
Fluid Sizing with Clamp
Print Styles
Best Practices
1. Use Modern Layout Methods
2. Handle Edge Cases
3. Use Semantic Sizing
4. Test All Breakpoints
Create systematic tests for all responsive layouts to ensure they work at every breakpoint.