Tailwindcss Advanced Layouts
Implement complex responsive layouts in Tailwind CSS v4—grid, flex, container queries, and classic page shells—while coding UI.
Overview
tailwindcss-advanced-layouts is an agent skill for the Build phase that implements advanced Tailwind CSS Grid, Flexbox, and container-query page structures.
Install
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-layoutsWhat is this skill?
- Proactive coverage for 11 layout triggers including holy grail, masonry alternatives, subgrid, and @container patterns
- Holy grail and responsive holy grail templates with sidebar order breakpoints
- CSS Grid recipes: grid-template-areas via Tailwind v4 arbitrary values, auto-fit/minmax responsive columns
- Flexbox utilities: flex-1, flex-grow, gap, sticky headers and footers
- Aspect-ratio utilities and multi-column magazine-style layouts
- 11 proactive activation scenarios listed in the skill description
- Includes holy grail, responsive holy grail, and complex grid HTML examples
Adoption & trust: 7.1k installs on skills.sh; 42 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know the UI you want—a dashboard shell, magazine columns, or responsive grid—but keep fighting Tailwind class combinations and v4 arbitrary syntax.
Who is it for?
Indie frontends building SaaS shells, blogs, or dashboards entirely in Tailwind who want agent-led layout recipes.
Skip if: Teams standardized on CSS modules only, native mobile layout, or design systems that ban arbitrary values.
When should I use this skill?
PROACTIVELY for complex CSS Grid, grid-template-areas, responsive grid, Flexbox patterns, sticky headers/footers, holy grail, masonry-style layouts, @container, subgrid, aspect-ratio, or magazine multi-column layouts.
What do I get? / Deliverables
You get working layout markup and patterns aligned to Tailwind v4 utilities so pages render correctly across breakpoints without a separate CSS architecture spike.
- Layout HTML snippets with Tailwind utility classes
- Grid, flex, and container-query pattern references from the skill body
Recommended Skills
Journey fit
How it compares
Skill-delivered layout templates, not a component library install or Figma-to-code plugin.
Common Questions / FAQ
Who is tailwindcss-advanced-layouts for?
Solo builders and small teams using Tailwind CSS who want an agent to propose Grid, Flex, and container-query structures while implementing pages.
When should I use tailwindcss-advanced-layouts?
Use it in Build frontend work when you need holy grail layouts, responsive grids, sticky chrome, masonry-style columns, subgrid, or @container layouts in Tailwind v4.
Is tailwindcss-advanced-layouts safe to install?
It is documentation-style layout guidance with no mandated shell access; review the Security Audits panel on this Prism page before adding marketplace skills to your agent.
SKILL.md
READMESKILL.md - Tailwindcss Advanced Layouts
# Tailwind CSS Advanced Layout Techniques ## CSS Grid Mastery ### Complex Grid Layouts ```html <!-- Holy Grail Layout --> <div class="grid min-h-screen grid-rows-[auto_1fr_auto]"> <header class="bg-white shadow">Header</header> <div class="grid grid-cols-[250px_1fr_300px]"> <aside class="bg-gray-50 p-4">Sidebar</aside> <main class="p-6">Main Content</main> <aside class="bg-gray-50 p-4">Right Sidebar</aside> </div> <footer class="bg-gray-800 text-white">Footer</footer> </div> <!-- Responsive Holy Grail --> <div class="grid min-h-screen grid-rows-[auto_1fr_auto]"> <header>Header</header> <div class="grid grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[250px_1fr_300px]"> <aside class="order-2 md:order-1">Sidebar</aside> <main class="order-1 md:order-2">Main</main> <aside class="order-3 hidden lg:block">Right</aside> </div> <footer>Footer</footer> </div> ``` ### Grid Template Areas ```css @utility grid-areas-dashboard { grid-template-areas: "header header header" "nav main aside" "nav footer footer"; } @utility area-header { grid-area: header; } @utility area-nav { grid-area: nav; } @utility area-main { grid-area: main; } @utility area-aside { grid-area: aside; } @utility area-footer { grid-area: footer; } ``` ```html <div class="grid grid-areas-dashboard grid-cols-[200px_1fr_250px] grid-rows-[60px_1fr_40px] min-h-screen"> <header class="area-header bg-white shadow">Header</header> <nav class="area-nav bg-gray-100">Navigation</nav> <main class="area-main p-6">Main Content</main> <aside class="area-aside bg-gray-50 p-4">Sidebar</aside> <footer class="area-footer bg-gray-800 text-white">Footer</footer> </div> ``` ### Auto-Fill and Auto-Fit Grids ```html <!-- Auto-fill: Creates as many tracks as fit, even empty ones --> <div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6"> <div class="bg-white rounded-lg shadow p-4">Card 1</div> <div class="bg-white rounded-lg shadow p-4">Card 2</div> <div class="bg-white rounded-lg shadow p-4">Card 3</div> </div> <!-- Auto-fit: Collapses empty tracks --> <div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6"> <!-- Cards stretch to fill available space --> </div> <!-- With arbitrary values --> <div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))] gap-4"> <!-- Handles edge case where container is smaller than minmax min --> </div> ``` ### Subgrid ```css /* Enable subgrid in v4 */ @utility subgrid-cols { grid-template-columns: subgrid; } @utility subgrid-rows { grid-template-rows: subgrid; } ``` ```html <div class="grid grid-cols-4 gap-4"> <!-- Span 2 columns but align children to parent grid --> <div class="col-span-2 grid subgrid-cols gap-4"> <div>Aligned to parent column 1</div> <div>Aligned to parent column 2</div> </div> </div> ``` ## Advanced Flexbox Patterns ### Space Distribution ```html <!-- Equal spacing with first/last at edges --> <div class="flex justify-between"> <div>First</div> <div>Second</div> <div>Third</div> </div> <!-- Equal spacing everywhere including edges --> <div class="flex justify-around"> <div>Item</div> <div>Item</div> <div>Item</div> </div> <!-- Double space between items vs edge