tailwindcss-safe-area

Tailwind CSS utilities for safe areas.

Features

- Responsive safe area utilities tailored for margin, padding, height and position
- Flexible spacing helpers using offset and or variants that adapt to safe areas
- Modern CSS support including logical properties and scroll snap

Getting started

$3

``sh
npm install tailwindcss-safe-area
`

Import the CSS plugin directly in your main CSS file:

`css
@import "tailwindcss";
@import "tailwindcss-safe-area";
`

_Note: we use @import above rather than @plugin_

$3

`sh


Latest version with v3 support


npm install tailwindcss-safe-area@0.8.0
`

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

`js
// 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:

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

$3

Handle safe area margin, padding, height and position:

`html


...

...

`

$3

Extend base utilities with an additional offset:

`html



`

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

$3

Apply a minimum value while respecting the safe area:

`html



`

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

Available utilities

$3

- m-safe, mx-safe, my-safe, ms-safe, me-safe
- mt-safe, mr-safe, mb-safe, ml-safe
- p-safe, px-safe, py-safe, ps-safe, pe-safe
- pt-safe, pr-safe, pb-safe, pl-safe

With variants:

- Add -offset-{value} for additional spacing (e.g. pt-safe-offset-4)
- Add -or-{value} for minimum values (e.g. pb-safe-or-8)

$3

Same as margin/padding utilities, prefixed with scroll-:

- scroll-m-safe, scroll-mx-safe, scroll-my-safe, etc.
- scroll-p-safe, scroll-px-safe, scroll-py-safe, etc.

$3

Screen utilities:

- h-screen-safe, min-h-screen-safe, max-h-screen-safe

Viewport utilities:

- h-vh-safe, h-dvh-safe, h-svh-safe, h-lvh-safe
- min-h-vh-safe, min-h-dvh-safe, min-h-svh-safe, min-h-lvh-safe
- max-h-vh-safe, max-h-dvh-safe, max-h-svh-safe, max-h-lvh-safe

-webkit-fill-available utilities:

- h-fill-safe, min-h-fill-safe, max-h-fill-safe

$3

- inset-safe, inset-x-safe, inset-y-safe
- start-safe, end-safe
- top-safe, right-safe, bottom-safe, left-safe

With variants:

- Add -offset-{value} for additional spacing (e.g., top-safe-offset-4)
- Add -or-{value} for minimum values (e.g., inset-safe-or-8)

$3

- border-safe, border-x-safe, border-y-safe
- border-s-safe, border-e-safe
- border-t-safe, border-r-safe, border-b-safe, border-l-safe

With variants:

- Add -offset-{value} for additional spacing (e.g., border-t-safe-offset-4)
- Add -or-{value} for minimum values (e.g., border-safe-or-8)

$3

- safe, safe-x, safe-y
- safe-t, safe-r, safe-b, safe-l
- safe-none, safe-x-none, safe-y-none
- safe-t-none, safe-r-none, safe-b-none, safe-l-none`