How-to

Layout snapping policy

Snapping updates source only when alignment alone explains the final position. If there is any leftover offset, we keep translate to preserve the exact layout.

Policy rules

Alignment-only snaps

If a snap lands exactly on a parent edge or center (no residual offset), the editor writes alignment classes and removes translate utilities.

Offsets keep translate

Any non-zero offset is stored as Tailwind translate utilities (arbitrary values), so the output stays “pure Tailwind” while preserving pixel-accurate layout.

Examples

Alignment-only snap

<h1 className="font-lexend text-5xl mr-auto">
  {title}
</h1>

Offset stays translate

<h1 className="font-lexend text-5xl mx-auto translate-y-[475.21px]">
  {title}
</h1>

Sibling offset

<p className="mt-6 text-[40px] text-neutral-300 translate-y-[-24px]">
  {subtitle}
</p>

Try the demo template

Open the layout snapping demo template and test snaps in Layout mode.

Open demo template