Last updated on February 21, 2026

Safe Area Insets

Edit

These utilities come from the tailwindcss-safe-area plugin, which is included automatically via nativewind/theme. They use env(safe-area-inset-*) values to ensure your content respects device safe areas such as notches, home indicators, and rounded corners.

Compatibility

ClassSupport
m-safe
✅ Full Support
mx-safe
✅ Full Support
my-safe
✅ Full Support
ms-safe
✅ Full Support
me-safe
✅ Full Support
mt-safe
✅ Full Support
mr-safe
✅ Full Support
mb-safe
✅ Full Support
ml-safe
✅ Full Support
p-safe
✅ Full Support
px-safe
✅ Full Support
py-safe
✅ Full Support
ps-safe
✅ Full Support
pe-safe
✅ Full Support
pt-safe
✅ Full Support
pr-safe
✅ Full Support
pb-safe
✅ Full Support
pl-safe
✅ Full Support
min-h-screen-safe
✅ Full Support
max-h-screen-safe
✅ Full Support
h-screen-safe
✅ Full Support
inset-safe
✅ Full Support
top-safe
✅ Full Support
right-safe
✅ Full Support
bottom-safe
✅ Full Support
left-safe
✅ Full Support
pb-safe-offset-{n}
✅ Full Support
pb-safe-or-{n}
✅ Full Support
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

On this page