Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/@rvxlab/tailwind-plugin-ios-full-height below:

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

A TailwindCSS plugin to add utilities for 100vh on iOS

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.

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4