Project builds with Yarn that utilizes tailwindcss-safe-area as a Tailwind plugin will fail. I assume this is due to tailwindcss-safe-area depending on the tailwindcss package as a devDependency only.

See this Yarn output:

Executing task: yarn workspace frontend run start 

Application bundle generation failed. [1.333 seconds]
✘ [ERROR] Your application tried to access tailwindcss-safe-area, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: tailwindcss-safe-area
Required by: /Users/felix/test-tw-safe-area/packages/frontend/

Require stack:
- /Users/felix/test-tw-safe-area/packages/frontend/tailwind.config.ts [plugin angular-sass]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    ../../.yarn/__virtual__/@angular-devkit-build-angular-virtual-db07bc24ee/3/.yarn/berry/cache/@angular-devkit-build-angular-npm-17.1.2-94d5f6ed53-10c0.zip/node_modules/@angular-devkit/build-angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:113:22:
      113 │                 build.onLoad({ filter: language.fileFilter }, (0,...
          ╵                       ~~~~~~

    at setup (/Users/felix/test-tw-safe-area/.yarn/__virtual__/@angular-devkit-build-angular-virtual-db07bc24ee/3/.yarn/berry/cache/@angular-devkit-build-angular-npm-17.1.2-94d5f6ed53-10c0.zip/node_modules/@angular-devkit/build-angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:113:23)
    at async handlePlugins (/Users/felix/test-tw-safe-area/.yarn/unplugged/esbuild-npm-0.19.11-b091158d92/node_modules/esbuild/lib/main.js:1340:9)

I will provide a quick fix for this. :)

I guess I misunderstood the docs since I thought *-safe-offset-{value} would mean I could do something like height-safe-offset-8?

Hi there. Thanks for the plugin. I'm trying to perform an optmized UX for my pwa app (Next.js 12 / Tailwindcss / Shadcn ui) when installed on iOS fullscreen / standalone mode.

The issue is I can't find the right "recipe" when applying p-safe classes to my app's layout structure, as it is shown bellow...

The top and bottom navbars are working as expected with the safe padding apllied properly when in fullscreen / standalone mode. However, I'm still having issues with the body that ends up getting a huge extra top padding when the app is opened on iOS standalone mode, it also seems to block interactivity until it is touched or scrolled, which is when it kind of falls back to a normal acceptable padding.

Even if I remove the safe padding from the body and then try to apply a top and bottom padding to the main layout, something is just not right in fullscreen mode. I'd really appreciate any guidance regarding the layout. Thanks in advance!

global.css

  html {
    display: flex;
    flex-direction: column;
  }

  html,
  body {
    height: -webkit-fill-available;
  }

  body {
    flex-grow: 1;
    /* PWA enhancements */
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overflow-x: hidden;
    @apply flex flex-col bg-background text-foreground antialiased select-none pt-safe pb-safe;
  }

top-navbar.tsx

interface TopNavProps {
  title?: string
}

export const TopNav = ({ title }: TopNavProps) => {
  return (
    <header className='site-header fixed left-0 top-0 z-40 w-full border-b border-border bg-secondary px-safe pt-safe'>
      <div className='mx-auto flex h-16 w-full max-w-screen-lg items-center justify-between px-6'>
        ...
      </div>
    </header>
  )
}

bottom-nav.tsx

export const BottomNav = () => {
    return (
        <nav className='bottom-nav fixed bottom-0 left-0 z-40 w-full border-t border-border bg-secondary pb-safe'>
            <div className='mx-auto flex h-16 max-w-md items-center justify-around px-6'>
                ...
            </div>
        </nav>
    )
}

layout.tsx

import Head from 'next/head'
import { Appbar } from '@/components/nav-top'
import { BottomNav } from '@/components/nav-bottom'
import { cn } from '@/lib/utils'

interface PageLayoutProps {
  title?: string
  className?: string
  children: React.ReactNode
}

export const PageLayout = ({ title, className, children }: PageLayoutProps): JSX.Element => (
  <>
    {title ? (
      <Head>
        <title>{title} - Mio Vino</title>
      </Head>
    ) : null}

    <Appbar title={title} />

    <main
      /**
       * Padding top = `appbar` height
       * Padding bottom = `bottom-nav` height
       */
      className={cn('mx-auto max-w-screen-lg px-safe pt-16 pb-20', className)}
    >
      <div className='px-6 py-4'>{children}</div>
    </main>

    <BottomNav />
  </>
)

The min-height: -webkit-fill-available; part of min-h-screen-safe makes the page be scrollable over the end, even if the content is occupying less than half of it.

I'm using a calc instead of the utility class to overcome this issue, but would it make sense to have a class that doesn't imply adding that part?

Hi,

Thanks for this nice little package. This is exactly what I was looking for. It works pretty well on Safari and Firefox, but I couldn't get it to work on Chrome. I'm using React, and here is the code of a div at the root of the app:

<div className="bg-red-500 h-screen-safe">Test</div>

And the result on different browsers.

Safari iOS

Safari macOS

Firefox

Chrome

On Chrome, the div doesn't want to fit the window height. Do you have any idea of the cause of the issue? Maybe I'm missing something.

I want to suggest an improvement for your package, add the ability to specify directions when using a fixed position, absolute, etc. We have a case in which padding, margin is not suitable for solving the problem.
'.bottom-safe': {
bottom: 'env(safe-area-inset-bottom)',
},
For example, to use *-safe-offset-{value} in this case, and maybe it will help other users of the package, I do not exclude that you can consider other directions if you see fit.
This option also solves the problem with problems on iPhone devices related to its menu area.

Add the max-h-* classes similar to the min-h-* ones