Tailwind safe area inset utilities

app.css

@layer utilities {
  /* extra helper classes to account for mobile safe areas */
  .p-safe {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .py-safe {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }
  .pr-safe {
    padding-right: env(safe-area-inset-right);
  }
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pl-safe {
    padding-left: env(safe-area-inset-right);
  }

  .m-safe {
    margin: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .mx-safe {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
  }
  .my-safe {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }
  .mt-safe {
    margin-top: env(safe-area-inset-top);
  }
  .mr-safe {
    margin-right: env(safe-area-inset-right);
  }
  .mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
  }
  .ml-safe {
    margin-left: env(safe-area-inset-right);
  }

  .top-safe {
    top: 0;
    top: env(safe-area-inset-top);
  }
  .right-safe {
    right: 0;
    right: env(safe-area-inset-right);
  }
  .bottom-safe {
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
  }
  .left-safe {
    left: 0;
    left: env(safe-area-inset-right);
  }
}