When users choose to install a PWA as a shortcut in either iOS or Android, some elements might need to be adjusted accordingly. For example: if something is positioned with absolute bottom-0, in a standalone PWA mode these components might need absolute bottom-* to offset iOS or Android controls that might overlap the PWA components.

Example of overlapping components which would be fine in the browser, but not in PWA standalone:

With adjustments:

The way we can detect if a website is running as a PWA standalone app is through (display-mode: standalone) media query. I've extended the tailwind configuration to give me pwa:* utility classes.

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      screens: {
        pwa: { raw: '(display-mode: standalone)' },
      },
    },
  }
};

I wonder if it wouldn't be useful to have this (or a similar solution) for such scenarios.