Built in support for safe-area-inset env variables

[lukewarlow]

It would be nice if there were built in utilities for handling the safe-area-inset env variables. These are a requirement for making good mobile experiences (at least on iOS).

[lukewarlow]

Made a PR to add the basic values (i.e. .ml-safe = margin-left: env(safe-area-inset-left);): #6366

[iBobik]

Any progress on this since PR was closed?

[lukewarlow]

I haven't had the time to look into it again. We just use a plugin to achieve this.

[skworden]

I've been adding my own safe padding for years and it's really helpful for phones with islands, notches, or UI components you can't avoid like the white line on the bottom of iPhones. Margin doesn't allow for full screen as padding does.

It would be nice if something similar was included by default. I set the min padding but there could be something like pl-safe-4.

Here's what I do on all my projects.

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      const min = "1.5rem";
      addUtilities({
        ".p-safe": {
          paddingBottom: `max(${min}, env(safe-area-inset-bottom))`,
          paddingLeft: `max(${min}, env(safe-area-inset-left))`,
          paddingRight: `max(${min}, env(safe-area-inset-right))`,
          paddingTop: `max(${min}, env(safe-area-inset-top))`,
        },
        ".pb-safe": {
          paddingBottom: `max(${min}, env(safe-area-inset-bottom))`,
        },
        ".pl-safe": {
          paddingLeft: `max(${min}, env(safe-area-inset-left))`,
        },
        ".pr-safe": {
          paddingRight: `max(${min}, env(safe-area-inset-right))`,
        },
        ".pt-safe": {
          paddingTop: `max(${min}, env(safe-area-inset-top))`,
        },
        ".px-safe": {
          paddingLeft: `max(${min}, env(safe-area-inset-left))`,
          paddingRight: `max(${min}, env(safe-area-inset-right))`,
        },
        ".py-safe": {
          paddingBottom: `max(${min}, env(safe-area-inset-bottom))`,
          paddingTop: `max(${min}, env(safe-area-inset-top))`,
        },
      });
    }),
  ],
};