A wrapping group of related inline items (tags, buttons, meta) with consistent gaps.

The pattern#

html
<div class="flex flex-wrap gap-2">
  <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">tag</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">tag</span>
</div>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • Tag lists
  • Button groups
  • Meta rows

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox