Tailwind Plugin for correct full height on iOS

A TailwindCSS plugin to add utilities for 100vh on iOS

Deprecated

With Tailwind 4 now out, the team intending to use CSS for plugins and the svh unit having broad support, it's time to sunset this plugin.

Feel free to keep using this plugin, it's not going anywhere, but you're better off using the min-h-svh class introduced in TailwindCSS 3.4, or add it yourself if below that version.

About

A "feature" of WebKit is that on iOS the screen flows a bit onder the main viewport. This was reported as a bug on the WebKit bug tracker and closed as WontFix.

To fix this, there is a CSS property you can use:

.some-element {
    height: -webkit-fill-available;
}

The issue with this is that it also targets Chrome, which is exactly what you don't want in this case. To go around it you can support an @supports rule to specifically target mobile:

@supports (-webkit-touch-callout: none) {
    .some-element {
        height: -webkit-fill-available;
    }
}

This plugin aims to make it easier to apply in TailwindCSS.

Installation

Run one of these:

npm i -D @rvxlab/tailwind-plugin-ios-full-height

# or

yarn add -D @rvxlab/tailwind-plugin-ios-full-height

Then add it to your plugins:

const iOSHeight = require('@rvxlab/tailwind-plugin-ios-full-height');

module.exports = {
    // ... your config
    plugins: [
        // ... your plugins
        iOSHeight,
    ],
};

Usage

This plugin adds 2 utility classes:

• min-h-screen-ios
• h-screen-ios

Add them by their class name or use @apply.

<div class="h-screen-ios min-h-screen-ios"></div>

.some-element {
    @apply h-screen-ios min-h-screen-ios;
}