extra-tailwindcss-safe-area weekly downloads statistics

extra-tailwindcss-safe-area

Tailwind CSS utilities for safe areas.

Features

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

Getting started

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

Usage

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

Base utilities

Handle safe area margin, padding, height and position.

Offset utilities

Extend base utilities with an additional offset.

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

Max utilities

Apply a maximum value while respecting the safe area.

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

Min utilities

Apply a minimum value while respecting the safe area.

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

Generated styles

Margin

Scroll margin

Same as margin, prefixed with scroll-.

Padding

Scroll padding

Same as padding, prefixed with scroll-.

Height

Width

Position

Variants

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

For example, using Tailwind's default spacing scale:

Troubleshooting

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

Special Thanks

This package is inspired by the original tailwindcss-safe-area by mvllow. Many thanks to mvllow for their work and contributions to the Tailwind CSS ecosystem.

Description from the npm listing.