tailwindcss-capacitor-safe-area weekly downloads statistics

tailwindcss-capacitor-safe-area

Tailwind CSS utilities for Capacitor 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

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.

Or utilities

Apply a minimum value while respecting the safe area.

This adds bottom padding equal to the larger 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

Screen height, using -webkit-fill-available on Safari:

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:

Description from the npm listing.