home / skills / fusengine / agents / tailwindcss-layout

tailwindcss-layout skill

safe

/plugins/tailwindcss/skills/tailwindcss-layout

This skill helps you apply Tailwind CSS v4.1 layout utilities for responsive flexbox, grid, and container queries to build adaptive user interfaces.

npx playbooks add skill fusengine/agents --skill tailwindcss-layout

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

1.3 KB

---
name: tailwindcss-layout
description: "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)."
user-invocable: false
---

# 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

Overview

This skill provides a compact TypeScript-based guide and utilities for Tailwind CSS v4.1 layout patterns, covering Flexbox, Grid, Position, Display, Spacing, and Container Queries. It focuses on practical class combinations and responsive strategies to speed layout composition and ensure predictable behavior across breakpoints. The goal is to make common layout problems solvable with a few deterministic utilities.

How this skill works

The skill inspects layout needs and maps them to Tailwind utility classes: flex directions, alignment, gaps, grid templates, positioning, and container query breakpoints. It recommends class sets for a desired layout outcome (e.g., centered two-column grid, sticky header with z-index) and explains trade-offs like using gap vs. space-x/space-y. It also highlights container query patterns for component-scoped responsiveness.

When to use it

When composing responsive components that must adapt by container size rather than viewport.
When you need predictable alignment and spacing using Tailwind utilities instead of custom CSS.
When converting design system patterns into atomic Tailwind class combinations.
When debugging layout regressions involving stacking context, positioning, or overflow.
When optimizing small, reusable components for layout reuse across pages.

Best practices

Prefer gap for grid/flex spacing; use space-x/space-y for inline directional spacing when appropriate.
Use container queries for component-level responsiveness to avoid coupling to viewport breakpoints.
Keep stacking contexts explicit: set z-index only when necessary and combine with position utilities.
Start with display utilities (flex/grid) then apply alignment utilities (justify, items, place) for clarity.
Avoid over-nesting layout containers; flatten with flex/grid when possible for simpler DOM and CSS.

Example use cases

Create a responsive two-column grid that collapses into a single column with grid-cols and @container breakpoints.
Build a horizontally centered toolbar with flex, justify-center, items-center, and gap utilities.
Implement a sticky header that remains above content using sticky, top-0, and a controlled z-index.
Lay out a card list with gap on a grid but use space-y on a stacked mobile layout for consistent vertical rhythm.
Scope a component’s responsive behavior using @container and container size tokens rather than global breakpoints.

FAQ

When should I use grid vs. flex for two-dimensional layouts?

Use grid when you need control over both rows and columns (explicit tracks). Use flex for one-dimensional flow where items align in a row or column.

How do container queries differ from media queries?

Container queries respond to the size of a parent container, enabling components to adapt locally. Media queries respond to viewport size and can be less precise for embedded or resizable components.