Tailwind CSS utilities for safe areas.
- 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
npm install --dev tailwindcss-safe-area
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {},
plugins: [require("tailwindcss-safe-area")],
};
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"
/>
Handle safe area margin, padding, height and position.
<header class="pt-safe">...</header>
<main class="px-safe">...</main>
<footer class="pb-safe">...</footer>
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
.
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
.
.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);
}
Same as margin, prefixed with scroll-
.
.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);
}
Same as padding, prefixed with scroll-
.
.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;
}
.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);
}
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);
}
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;
}
}