Safe area and hairlines

Safe-area utilities

pt-safe, pb-safe, pl-safe, pr-safe, p-safe, px-safe and py-safe read the safe-area insets as custom properties, so they update on rotation with no rebuild. mt-safe, mr-safe, mb-safe and ml-safe do the same for margin, for a value that needs to push a sibling out of the inset rather than pad its own content into it.

<view class="pt-safe px-4" style="flex: 1">...</view>

pt-safe-4 adds the inset to a step off the spacing scale - the padding a design wanted under the status bar or notch anyway. min-pt-safe-4 takes whichever of the inset and the step is larger, for a layout that already had padding and only needs it to grow where the device needs more:

<view class="min-pt-safe-4">...</view>

On native the insets arrive at runtime from <safe-area-provider>; on the web they come from env(safe-area-inset-*).

Hairline utilities

h-hairline, w-hairline, border-hairline and the per-side border-{t,r,b,l}-hairline draw the thinnest line the screen can actually show - a third of a point on a 3x display - rather than Tailwind's border, which is one full CSS pixel and reads as a visibly fat divider on a phone.

<view class="border-t-hairline border-gray-200"></view>

The width comes from deviceTokens() on native and a min-resolution media query on the web - reach for border-hairline any time a design calls for "the thinnest line the platform can draw" rather than a fixed point size.