mcpField
T
tailwindcss-layout

tailwindcss-layout

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

About tailwindcss-layout

A skill covering Tailwind CSS v4.3 layout utilities for developers building responsive interfaces. It focuses on Flexbox, Grid, positioning, display, spacing, alignment, and container queries.

Key features

  1. 01Flexbox direction and alignment utilities
  2. 02Grid tracks and placement utilities
  3. 03Position and inset controls
  4. 04Display mode utilities
  5. 05Container queries and breakpoints
  6. 06Spacing and multi-axis alignment

Use cases

  1. 01Arrange responsive content with Flexbox
  2. 02Build page grids and place elements
  3. 03Position overlays and control stacking
  4. 04Adapt layouts to container dimensions

Install

Copy the command and run it in a terminal.

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

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

Bundled files

References and scripts installed along with SKILL.md.

references/
flexbox.md
grid.md
position.md

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