Package Exports

tailwindcss-safe-area
tailwindcss-safe-area/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-safe-area) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tailwindcss-safe-area

Tailwind CSS utilities for safe areas.

Features

Responsive safe area utilities tailored for margin, padding, height and position
Flexible spacing helpers to extend safe areas or ensure content remains unobstructed with offset and minimum value variants
Modern CSS support, including inline-start, inline-end, scroll-margin, scroll-padding and more to handle modern layouts

Getting started

npm install tailwindcss-safe-area

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {},
    plugins: [require("tailwindcss-safe-area")],
};

Usage

To extend content behind the safe area, add or append viewport-fit=cover to your viewport meta tag:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1, viewport-fit=cover"
/>

Base utilities

Handle safe area margin, padding, height and position.

<header class="pt-safe">...</header>
<main class="px-safe">...</main>
<footer class="pb-safe">...</footer>

Offset utilities

Extend base utilities with an additional offset.

<div class="pr-safe-offset-4">...</div>

This adds right padding equal to the safe area plus 4.

Or utilities

Apply a minimum value while respecting the safe area.

<div class="pb-safe-or-8">...</div>

This adds bottom padding equal to the larger of the safe area or 8.

Generated styles

Margin

.m-safe {
    margin-top: env(safe-area-inset-top);
    margin-right: env(safe-area-inset-right);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
}
.mx-safe {
    margin-right: env(safe-area-inset-right);
    margin-left: env(safe-area-inset-left);
}
.my-safe {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
}
.ms-safe {
    margin-inline-start: env(safe-area-inset-left);
}
.me-safe {
    margin-inline-end: env(safe-area-inset-left);
}
.mt-safe {
    margin-top: env(safe-area-inset-top);
}
.mr-safe {
    margin-right: env(safe-area-inset-right);
}
.mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
}
.ml-safe {
    margin-left: env(safe-area-inset-left);
}

Scroll margin

Same as margin, prefixed with scroll-.

Padding

.p-safe {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
.px-safe {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}
.py-safe {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
.ps-safe {
    padding-inline-start: env(safe-area-inset-left);
}
.pe-safe {
    padding-inline-end: env(safe-area-inset-left);
}
.pt-safe {
    padding-top: env(safe-area-inset-top);
}
.pr-safe {
    padding-right: env(safe-area-inset-right);
}
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}
.pl-safe {
    padding-left: env(safe-area-inset-left);
}

Scroll padding

Same as padding, prefixed with scroll-.

Height

.min-h-screen-safe {
    min-height: calc(
        100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))
    );
    min-height: -webkit-fill-available;
}
.max-h-screen-safe {
    max-height: calc(
        100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))
    );
    max-height: -webkit-fill-available;
}
.h-screen-safe {
    height: calc(
        100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))
    );
    height: -webkit-fill-available;
}

Position

.inset-safe: {
    top: env(safe-area-inset-top);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
}
.inset-x-safe: {
    right: env(safe-area-inset-right);
    left: env(safe-area-inset-left);
}
.inset-y-safe: {
    top: env(safe-area-inset-top);
    bottom: env(safe-area-inset-bottom);
}
.start-safe: {
    inset-inline-start: env(safe-area-inset-left);
}
.end-safe: {
    inset-inline-end: env(safe-area-inset-left);
}
.top-safe: {
    top: env(safe-area-inset-top);
}
.right-safe: {
    right: env(safe-area-inset-right);
}
.bottom-safe: {
    bottom: env(safe-area-inset-bottom);
}
.left-safe: {
    left: env(safe-area-inset-left);
}

Variants

Spacing-based utiltiies can be augmented with either -offset-{value} or -or-{value} suffixes.

For example, using Tailwind's default spacing scale:

.mr-safe-offset-8 {
    margin-right: calc(env(safe-area-inset-right) + 2rem);
}
.pb-safe-or-20 {
    padding-bottom: max(env(safe-area-inset-right), 5rem);
}

Troubleshooting

The height utilities may not always work as expected. Add the following global CSS for the correct behaviour:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html,
    body,
    #root {
        height: -webkit-fill-available;
    }
}