Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
tailwindcss-safe-area
Advanced tools
tailwindcss-safe-area - npm Package Compare versions
Comparing version 0.5.1 to 0.6.0
293
index.js
@@ -1,137 +0,228 @@ | ||
| const plugin = require('tailwindcss/plugin') | ||
| const plugin = require("tailwindcss/plugin"); | ||
| const safeArea = plugin(({addUtilities, matchUtilities, theme}) => { | ||
| function generateVariantUtilities(baseUtilities, variant, generateValue) { | ||
| return Object.entries(baseUtilities).reduce( | ||
| (acc, [selector, propertyValue]) => { | ||
| const className = selector.slice(1); | ||
| acc[`${className}-${variant}`] = (x) => | ||
| Object.entries(propertyValue).reduce((result, [property, value]) => { | ||
| if (Array.isArray(value)) { | ||
| result[property] = value.map((v) => | ||
| v === "-webkit-fill-available" ? v : generateValue(v, x), | ||
| ); | ||
| } else { | ||
| result[property] = generateValue(value, x); | ||
| } | ||
| return result; | ||
| }, {}); | ||
| return acc; | ||
| }, | ||
| {}, | ||
| ); | ||
| } | ||
| const safeArea = plugin(({ addUtilities, matchUtilities, theme }) => { | ||
| const baseUtilities = { | ||
| '.m-safe': { | ||
| marginTop: 'env(safe-area-inset-top)', | ||
| marginRight: 'env(safe-area-inset-right)', | ||
| marginBottom: 'env(safe-area-inset-bottom)', | ||
| marginLeft: 'env(safe-area-inset-left)', | ||
| ".m-safe": { | ||
| marginTop: "env(safe-area-inset-top)", | ||
| marginRight: "env(safe-area-inset-right)", | ||
| marginBottom: "env(safe-area-inset-bottom)", | ||
| marginLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| '.mx-safe': { | ||
| marginRight: 'env(safe-area-inset-right)', | ||
| marginLeft: 'env(safe-area-inset-left)', | ||
| ".mx-safe": { | ||
| marginRight: "env(safe-area-inset-right)", | ||
| marginLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| '.my-safe': { | ||
| marginTop: 'env(safe-area-inset-top)', | ||
| marginBottom: 'env(safe-area-inset-bottom)', | ||
| ".my-safe": { | ||
| marginTop: "env(safe-area-inset-top)", | ||
| marginBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| '.mt-safe': { | ||
| marginTop: 'env(safe-area-inset-top)', | ||
| ".ms-safe": { | ||
| marginInlineStart: "env(safe-area-inset-left)", | ||
| }, | ||
| '.mr-safe': { | ||
| marginRight: 'env(safe-area-inset-right)', | ||
| ".me-safe": { | ||
| marginInlineEnd: "env(safe-area-inset-left)", | ||
| }, | ||
| '.mb-safe': { | ||
| marginBottom: 'env(safe-area-inset-bottom)', | ||
| ".mt-safe": { | ||
| marginTop: "env(safe-area-inset-top)", | ||
| }, | ||
| '.ml-safe': { | ||
| marginLeft: 'env(safe-area-inset-left)', | ||
| ".mr-safe": { | ||
| marginRight: "env(safe-area-inset-right)", | ||
| }, | ||
| '.p-safe': { | ||
| paddingTop: 'env(safe-area-inset-top)', | ||
| paddingRight: 'env(safe-area-inset-right)', | ||
| paddingBottom: 'env(safe-area-inset-bottom)', | ||
| paddingLeft: 'env(safe-area-inset-left)', | ||
| ".mb-safe": { | ||
| marginBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| '.px-safe': { | ||
| paddingRight: 'env(safe-area-inset-right)', | ||
| paddingLeft: 'env(safe-area-inset-left)', | ||
| ".ml-safe": { | ||
| marginLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| '.py-safe': { | ||
| paddingTop: 'env(safe-area-inset-top)', | ||
| paddingBottom: 'env(safe-area-inset-bottom)', | ||
| ".p-safe": { | ||
| paddingTop: "env(safe-area-inset-top)", | ||
| paddingRight: "env(safe-area-inset-right)", | ||
| paddingBottom: "env(safe-area-inset-bottom)", | ||
| paddingLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| '.pt-safe': { | ||
| paddingTop: 'env(safe-area-inset-top)', | ||
| ".px-safe": { | ||
| paddingRight: "env(safe-area-inset-right)", | ||
| paddingLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| '.pr-safe': { | ||
| paddingRight: 'env(safe-area-inset-right)', | ||
| ".py-safe": { | ||
| paddingTop: "env(safe-area-inset-top)", | ||
| paddingBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| '.pb-safe': { | ||
| paddingBottom: 'env(safe-area-inset-bottom)', | ||
| ".ps-safe": { | ||
| paddingInlineStart: "env(safe-area-inset-left)", | ||
| }, | ||
| '.pl-safe': { | ||
| paddingLeft: 'env(safe-area-inset-left)', | ||
| ".pe-safe": { | ||
| paddingInlineEnd: "env(safe-area-inset-left)", | ||
| }, | ||
| '.top-safe': { | ||
| top: 'env(safe-area-inset-top)', | ||
| ".pt-safe": { | ||
| paddingTop: "env(safe-area-inset-top)", | ||
| }, | ||
| '.right-safe': { | ||
| right: 'env(safe-area-inset-right)', | ||
| ".pr-safe": { | ||
| paddingRight: "env(safe-area-inset-right)", | ||
| }, | ||
| '.bottom-safe': { | ||
| bottom: 'env(safe-area-inset-bottom)', | ||
| ".pb-safe": { | ||
| paddingBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| '.left-safe': { | ||
| left: 'env(safe-area-inset-left)', | ||
| ".pl-safe": { | ||
| paddingLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| '.min-h-screen-safe': { | ||
| ".scroll-m-safe": { | ||
| scrollMarginTop: "env(safe-area-inset-top)", | ||
| scrollMarginRight: "env(safe-area-inset-right)", | ||
| scrollMarginBottom: "env(safe-area-inset-bottom)", | ||
| scrollMarginLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-mx-safe": { | ||
| scrollMarginRight: "env(safe-area-inset-right)", | ||
| scrollMarginLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-my-safe": { | ||
| scrollMarginTop: "env(safe-area-inset-top)", | ||
| scrollMarginBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| ".scroll-ms-safe": { | ||
| scrollMarginInlineStart: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-me-safe": { | ||
| scrollMarginInlineEnd: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-mt-safe": { | ||
| scrollMarginTop: "env(safe-area-inset-top)", | ||
| }, | ||
| ".scroll-mr-safe": { | ||
| scrollMarginRight: "env(safe-area-inset-right)", | ||
| }, | ||
| ".scroll-mb-safe": { | ||
| scrollMarginBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| ".scroll-ml-safe": { | ||
| scrollMarginLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-p-safe": { | ||
| scrollPaddingTop: "env(safe-area-inset-top)", | ||
| scrollPaddingRight: "env(safe-area-inset-right)", | ||
| scrollPaddingBottom: "env(safe-area-inset-bottom)", | ||
| scrollPaddingLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-px-safe": { | ||
| scrollPaddingRight: "env(safe-area-inset-right)", | ||
| scrollPaddingLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-py-safe": { | ||
| scrollPaddingTop: "env(safe-area-inset-top)", | ||
| scrollPaddingBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| ".scroll-ps-safe": { | ||
| scrollPaddingInlineStart: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-pe-safe": { | ||
| scrollPaddingInlineEnd: "env(safe-area-inset-left)", | ||
| }, | ||
| ".scroll-pt-safe": { | ||
| scrollPaddingTop: "env(safe-area-inset-top)", | ||
| }, | ||
| ".scroll-pr-safe": { | ||
| scrollPaddingRight: "env(safe-area-inset-right)", | ||
| }, | ||
| ".scroll-pb-safe": { | ||
| scrollPaddingBottom: "env(safe-area-inset-bottom)", | ||
| }, | ||
| ".scroll-pl-safe": { | ||
| scrollPaddingLeft: "env(safe-area-inset-left)", | ||
| }, | ||
| ".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": { | ||
| insetInlineStart: "env(safe-area-inset-left)", | ||
| }, | ||
| ".end-safe": { | ||
| insetInlineEnd: "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)", | ||
| }, | ||
| ".min-h-screen-safe": { | ||
| minHeight: [ | ||
| 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))', | ||
| '-webkit-fill-available', | ||
| "calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))", | ||
| "-webkit-fill-available", | ||
| ], | ||
| }, | ||
| '.max-h-screen-safe': { | ||
| ".max-h-screen-safe": { | ||
| maxHeight: [ | ||
| 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))', | ||
| '-webkit-fill-available', | ||
| "calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))", | ||
| "-webkit-fill-available", | ||
| ], | ||
| }, | ||
| '.h-screen-safe': { | ||
| ".h-screen-safe": { | ||
| height: [ | ||
| 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))', | ||
| '-webkit-fill-available', | ||
| "calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))", | ||
| "-webkit-fill-available", | ||
| ], | ||
| }, | ||
| } | ||
| addUtilities(baseUtilities) | ||
| }; | ||
| addUtilities(baseUtilities); | ||
| const offsetUtilities = Object.entries(baseUtilities).reduce( | ||
| (accu, [selector, propertyValue]) => { | ||
| const className = selector.slice(1) | ||
| accu[`${className}-offset`] = (x) => | ||
| Object.entries(propertyValue).reduce((accu, [property, value]) => { | ||
| if (Array.isArray(value)) { | ||
| accu[property] = value.map((v) => | ||
| v === '-webkit-fill-available' ? v : `calc(${v} + ${x})` | ||
| ) | ||
| } else { | ||
| accu[property] = `calc(${value} + ${x})` | ||
| } | ||
| return accu | ||
| }, {}) | ||
| return accu | ||
| }, | ||
| {} | ||
| ) | ||
| const offsetUtilities = generateVariantUtilities( | ||
| baseUtilities, | ||
| "offset", | ||
| (v, x) => `calc(${v} + ${x})`, | ||
| ); | ||
| matchUtilities(offsetUtilities, { | ||
| values: theme('spacing'), | ||
| values: theme("spacing"), | ||
| supportsNegativeValues: true, | ||
| }) | ||
| }); | ||
| const orUtilities = Object.entries(baseUtilities).reduce( | ||
| (accu, [selector, propertyValue]) => { | ||
| const className = selector.slice(1) | ||
| accu[`${className}-or`] = (x) => | ||
| Object.entries(propertyValue).reduce((accu, [property, value]) => { | ||
| if (Array.isArray(value)) { | ||
| accu[property] = value.map((v, i) => | ||
| v === '-webkit-fill-available' ? v : `max(${v}, ${x})` | ||
| ) | ||
| } else { | ||
| accu[property] = `max(${value}, ${x})` | ||
| } | ||
| return accu | ||
| }, {}) | ||
| return accu | ||
| }, | ||
| {} | ||
| ) | ||
| const orUtilities = generateVariantUtilities( | ||
| baseUtilities, | ||
| "or", | ||
| (v, x) => `max(${v}, ${x})`, | ||
| ); | ||
| matchUtilities(orUtilities, { | ||
| values: theme('spacing'), | ||
| values: theme("spacing"), | ||
| supportsNegativeValues: true, | ||
| }) | ||
| }) | ||
| }); | ||
| }); | ||
| module.exports = safeArea | ||
| module.exports = safeArea; |
| { | ||
| "name": "tailwindcss-safe-area", | ||
| "version": "0.5.1", | ||
| "version": "0.6.0", | ||
| "description": "Tailwind CSS safe area helpers", | ||
@@ -8,2 +8,3 @@ "license": "MIT", | ||
| "funding": "https://github.com/sponsors/mvllow", | ||
| "types": "index.d.ts", | ||
| "author": { | ||
@@ -15,3 +16,4 @@ "name": "mvllow", | ||
| "scripts": { | ||
| "release": "npx np@latest --no-tests" | ||
| "test": "ava", | ||
| "release": "npx np@latest" | ||
| }, | ||
@@ -33,11 +35,5 @@ "engines": { | ||
| "devDependencies": { | ||
| "prettier": "^2.5.1" | ||
| }, | ||
| "prettier": { | ||
| "bracketSpacing": false, | ||
| "semi": false, | ||
| "singleQuote": true, | ||
| "trailingComma": "es5", | ||
| "useTabs": true | ||
| "ava": "^6.1.3", | ||
| "prettier": "^3.3.3" | ||
| } | ||
| } |
227
readme.md
| # tailwindcss-safe-area | ||
| Safe area inset utilities extending margin, padding, and height. The plugin provides base, offset, and or utilities for better adaptability across various scenarios. | ||
| 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 | ||
@@ -17,4 +23,4 @@ | ||
| theme: {}, | ||
| plugins: [require('tailwindcss-safe-area')], | ||
| } | ||
| plugins: [require("tailwindcss-safe-area")], | ||
| }; | ||
| ``` | ||
@@ -24,21 +30,18 @@ | ||
| This plugin extends the padding and margin utilities with three types: | ||
| To extend content behind the safe area, add or append `viewport-fit=cover` to your viewport meta tag: | ||
| 1. **Base Utilities**: The base safe area inset utilities. These include the initial padding and margin utilities with the safe area in consideration. They can be used where you want the element to respect the safe area insets. | ||
| ```html | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, viewport-fit=cover" | ||
| /> | ||
| ``` | ||
| 2. **Offset Utilities**: These utilities allow you to extend the base safe area inset by a given offset. This can be particularly useful when you want a bit more spacing than the safe area provides, for example in situations where you have a translucent UI over a background image or video and want to ensure important visual content isn't covered. | ||
| ### Base utilities | ||
| 3. **Or Utilities**: These utilities let you specify a minimum value to use if it's greater than the safe area inset. This can be used when you have certain layout elements that should respect the safe area but should never be smaller than a certain size. | ||
| Handle safe area margin, padding, height and position. | ||
| Here are some examples: | ||
| ### Base utilities | ||
| ```html | ||
| <header class="pt-safe">...</header> | ||
| <main class="px-safe"> | ||
| <p>ciao</p> | ||
| </main> | ||
| <main class="px-safe">...</main> | ||
| <footer class="pb-safe">...</footer> | ||
@@ -49,3 +52,3 @@ ``` | ||
| The offset utilities can be used by appending `-offset-{value}` to the base utility. This applies an additional margin or padding equal to the specified value. For example, if you want to apply a right padding that is equal to the safe area inset plus 4 units of your spacing scale, you can use: | ||
| Extend base utilities with an additional offset. | ||
@@ -56,5 +59,7 @@ ```html | ||
| This adds right padding equal to the safe area plus `4`. | ||
| ### Or utilities | ||
| The or utilities can be used by appending `-or-{value}` to the base utility. This applies a margin or padding that is the larger of the safe area inset and the specified value. For example, if you want to apply a bottom padding that is the larger of the safe area inset and 8 units of your spacing scale, you can use: | ||
| Apply a minimum value while respecting the safe area. | ||
@@ -65,75 +70,166 @@ ```html | ||
| ## Provided utilities | ||
| This adds bottom padding equal to the larger of the safe area or `8`. | ||
| | Utilities | Styles | | ||
| | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | ||
| | `m-safe, p-safe` | `env(safe-area-inset-{top, right, bottom, left})` | | ||
| | `mx-safe, px-safe` | `env(safe-area-inset-{right, left})` | | ||
| | `my-safe, py-safe` | `env(safe-area-inset-{top, bottom})` | | ||
| | `mt-safe, pt-safe` | `env(safe-area-inset-top)` | | ||
| | `mr-safe, pr-safe` | `env(safe-area-inset-right)` | | ||
| | `mb-safe, pb-safe` | `env(safe-area-inset-bottom)` | | ||
| | `ml-safe, pl-safe` | `env(safe-area-inset-left)` | | ||
| | `min-h-screen-safe, max-h-screen-safe, h-screen-safe` | `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))`<br>`-webkit-fill-available` | | ||
| | `*-safe-offset-{value}` | `calc(env(safe-area-inset-*) + {value})` | | ||
| | `*-safe-or-{value}` | `max(env(safe-area-inset-*), {value})` | | ||
| ## Generated styles | ||
| > Tip: To extend html content behind the safe area, set `viewport-fit=cover` | ||
| ### Margin | ||
| ```html | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0, viewport-fit=cover" | ||
| /> | ||
| ```css | ||
| .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); | ||
| } | ||
| ``` | ||
| <details><summary><h4> Examples with generated output</h4></summary> | ||
| ### Scroll margin | ||
| #### Base Utility Example | ||
| Same as [margin](#margin), prefixed with `scroll-`. | ||
| ```html | ||
| <header class="pt-safe">...</header> | ||
| ``` | ||
| ### Padding | ||
| This applies a top padding to the header that is equal to the safe area inset at the top. The generated CSS would be: | ||
| ```css | ||
| .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); | ||
| } | ||
| ``` | ||
| #### Offset Utility Example | ||
| ### Scroll padding | ||
| ```html | ||
| <div class="pr-safe-offset-4">...</div> | ||
| ``` | ||
| Same as [padding](#padding), prefixed with `scroll-`. | ||
| This applies a right padding to the div that is equal to the safe area inset on the right plus 4 units of your spacing scale. Assuming your spacing scale unit is 8px (default in Tailwind CSS), the generated CSS would be: | ||
| ### Height | ||
| ```css | ||
| .pr-safe-offset-4 { | ||
| padding-right: calc(env(safe-area-inset-right) + 1rem); | ||
| .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; | ||
| } | ||
| ``` | ||
| #### Or Utility Example | ||
| ### Position | ||
| ```html | ||
| <div class="pb-safe-or-8">...</div> | ||
| ```css | ||
| .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); | ||
| } | ||
| ``` | ||
| This applies a bottom padding to the div that is the larger of the safe area inset at the bottom and 8 units of your spacing scale. Assuming your spacing scale unit is 8px (default in Tailwind CSS), the generated CSS would be: | ||
| ### Variants | ||
| Spacing-based utiltiies can be augmented with either `-offset-{value}` or `-or-{value}` suffixes. | ||
| For example, using Tailwind's default spacing scale: | ||
| ```css | ||
| .pb-safe-or-8 { | ||
| padding-bottom: max(env(safe-area-inset-bottom), 2rem); | ||
| .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); | ||
| } | ||
| ``` | ||
| </details> | ||
| ## Troubleshooting | ||
| The `h-screen-safe` and `min-h-screen-safe` utilities may not work as expected on Google Chrome. Add `height: -webkit-fill-available` on parent nodes: | ||
| The height utilities may not always work as expected. Add the following global CSS for the correct behaviour: | ||
@@ -146,11 +242,4 @@ ```css | ||
| @layer base { | ||
| html { | ||
| height: -webkit-fill-available; | ||
| } | ||
| body { | ||
| height: -webkit-fill-available; | ||
| } | ||
| /* If using React, set height on the root div as well */ | ||
| html, | ||
| body, | ||
| #root { | ||
@@ -157,0 +246,0 @@ height: -webkit-fill-available; |
New alerts
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by381.26%
54777
- Number of package files
- increased by125%
9
- Lines of code
- increased by214.29%
418
- Number of lines in readme file
- increased by57.42%
244
Worsened metrics
- Dev dependency count
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
2
No dependency changes