Development

/tailwindcss-layout

Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.

fusengine@fusengine

GitHub

From plugin

fusengine-agents See the plugin

22196 skills

shell

$ npx -y skills add fusengine/agents --skill tailwindcss-layout --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/tailwindcss-layout

How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.

SKILL.md

tailwindcss-layout.SKILL.md

name: tailwindcss-layout
description: "Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries."
user-invocable: false

<objective> Layout utilities for Tailwind CSS v4.1: 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. </objective>

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`

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>