mcpField
T
tailwindcss-layout

tailwindcss-layout

github.com/fusengineDesign & UI3447 installsUpdated 2w ago
Repository

About tailwindcss-layout

A reference skill for Tailwind CSS v4.3 layout utilities, aimed at developers building responsive interfaces. It covers Flexbox, Grid, positioning, display, spacing, alignment, and container queries.

Key features

  1. 01Flexbox layout utilities
  2. 02Grid rows, columns, and placement
  3. 03Positioning and display utilities
  4. 04Container queries and breakpoints
  5. 05Spacing and multi-axis alignment

Use cases

  1. 01Building responsive Flexbox layouts
  2. 02Defining grid-based page structures
  3. 03Positioning and layering interface elements
  4. 04Applying container-relative breakpoints

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/claude-plugins --skill tailwindcss-layout

After installing, type/tailwindcss-layoutin Claude Code to confirm it loaded.

Details

From the project README
Layout utilities for Tailwind CSS v4.3: Flexbox (`flex`, direction, `justify-*`, `items-*`, `gap`), Grid (`grid-cols-*`, `grid-rows-*`, `place-*`), Position (`absolute`/`relative`/`fixed`/`sticky`, `inset-*`, `z-*`), Display (`block`/`inline`/`flex`/`grid`/`hidden`), and Container Queries (`@container`, `@md`/`@lg` container-relative breakpoints).

Also covers multi-directional spacing (gap, space-x/space-y) and multi-axis alignment utilities.

Tailwind CSS Layout Utilities (v4.3)

Layout utilities for building responsive layouts with Flexbox, Grid, Positioning, and Container Queries.

Core Topics

  • Flexbox: flex, flex-direction, justify-content, align-items, gap
  • Grid: grid, grid-template-columns, grid-template-rows, place-items, place-content
  • Position: absolute, relative, fixed, sticky, inset, z-index
  • Display: block, inline, inline-block, flex, grid, hidden
  • Container Queries: @container, @container-size (since v4.3, size container for cqb/cqh units), @md, @lg, responsive container sizing
  • Spacing: gap, space-x, space-y, multi-directional spacing
  • Alignment: justify-start, items-center, place-content, multi-axis alignment
  • Inset: inset, inset-x, inset-y, top, right, bottom, left, logical inset-s/inset-e/inset-bs/inset-be (since v4.2; start-*/end-* deprecated)

Display

<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>

References

  • /flexbox.md - Flexbox utilities, flex direction, flex grow/shrink
  • /grid.md - Grid layout, columns, rows, gaps, placement
  • /position.md - Position utilities, absolute/relative/fixed/sticky, stacking

Comments

Markdown supported