Skip to content

A TailwindCSS plugin to add utilities for 100vh on iOS - Supports TailwindCSS 1.2+

License

Notifications You must be signed in to change notification settings

RVxLab/tailwind-plugin-ios-full-height

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind Plugin for correct full height on iOS

Latest version Supported TailwindCSS versions Weekly downloads Total downloads

A TailwindCSS plugin to add utilities for 100vh on iOS

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;
}

About

A TailwindCSS plugin to add utilities for 100vh on iOS - Supports TailwindCSS 1.2+

Topics

Resources

License

Stars

Watchers

Forks