Implement iPhone safe area css for Tailwind

tailwind-safe-area.css

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

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

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