tailwindcss-advanced-layouts

Item: tailwindcss-advanced-layouts
Rating: 3.4
Author: Implexa

Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2)…

view source

installs

stars

karma

SkillRank score ↗

3.4/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-06-17

tailwindcss-advanced-layouts provides html code examples for grid and flexbox patterns, but lacks actionable procedures, decision logic, or failure handling.

structure

2.0

trigger phrases

2.0

procedure

2.0

edge cases

1.0

documentation

3.0

strengths

SKILL.md

Tailwind CSS Advanced Layout Techniques

CSS Grid Mastery

Complex Grid Layouts

<!-- 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>

related skills

semantically similar in the cross-vendor index

skills.sh

73% match

tailwind-css-patterns

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors,…

don't have the plugin yet? install it then click "run inline in claude" again.