Skip to main content
Frontend Developmentfusengine

tailwindcss-layout

Layout utilities Tailwind CSS v4.1. Flexbox (flex, justify, items, gap), Grid (grid-cols, grid-rows, place), Position (absolute, relative, fixed, sticky, inset, z-index), Container queries (@container).

Stars
13
Source
fusengine/agents
Updated
2026-05-17
Slug
fusengine--agents--tailwindcss-layout
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/fusengine/agents/HEAD/plugins/tailwindcss/skills/tailwindcss-layout/SKILL.md -o .claude/skills/tailwindcss-layout.md

Drops the SKILL.md into .claude/skills/tailwindcss-layout.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Tailwind CSS Layout Utilities (v4.1)

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, @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

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