Fix mask composite guides alignment

[wongjn]

Fixes #2194

The math for the top-[calc(25%-2px)] classes were incorrect. The percentage should correspond to:

Where
  u is a spacing unit, `0.25em`
  L is the "mask-add/subtract/…" text's `line-height` = 0.75rem * ( 1 / 0.75 ) = 1rem = 4u
  M is the "mask-add/subtract/…" text's `mb-3` = 3u
  H is the masked images' height, `h-24` = 24u

Then
  Total height, T = L + M + H
                  = 4u + 3u + 24u
                  = 31u

  Masked image top offset, Q = L + M
                             = 4u + 3u
                             = 7u

  As a percentage = Q ÷ T
                  = 7u ÷ 31u × 100%
                  ≈ 22.6%

Thus to line everything up, the top should be top-[calc(700%/31-2px)].

However, since the bottom of each grid element is aligned to the bottom of the images, I'd thought it'd be simpler to offset the guide elements' Y position based of the bottom. Thus, we'd only need to offset their border width 2px, with -bottom-[2px].

Before	After

Perhaps ideally we'd use a CSS variable to DRY all the 2px border width offsets but that seemed out of scope of this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2025 7:50pm