"safe" modifier safe-area-inset-* for iOS and other non-rectangular devices

[rynz]

It's becoming common practice to extend TailwindCSS with

@layer utilities {
  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .py-safe {
    @apply pt-safe pb-safe;
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/env#values

It would be nice to include these as calc functions that extend the other modifiers, for example

<div class="lg:safe:py-4"></div>

Whereby the padding of py-4 is applied to the element, but the modifier also adds env(safe-area-inset-top) and env(safe-area-inset-bottom) to the respective padding values.

This would be a very nice addition when creating responsive, multi-device designs. Particularly as a fixed nav cannot be touched on iOS devices because it appears behind the status bar. With this feature, we merely add a safe modifier without having to change any of the underlying DOM structure.