You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

tailwindcss-safe-area

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-safe-area - npm Package Compare versions

Comparing version

0.4.1
to
0.5.0

6

index.js

@@ -75,2 +75,8 @@ const plugin = require('tailwindcss/plugin')

},
'.max-h-screen-safe': {
maxHeight: [
'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
'-webkit-fill-available',
],
},
'.h-screen-safe': {

@@ -77,0 +83,0 @@ height: [

2

package.json
{
"name": "tailwindcss-safe-area",
"version": "0.4.1",
"version": "0.5.0",
"description": "Tailwind CSS safe area helpers",

@@ -5,0 +5,0 @@ "license": "MIT",

50

readme.md

@@ -63,14 +63,14 @@ # tailwindcss-safe-area

| 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, 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})` |
| 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})` |

@@ -98,3 +98,3 @@ > Tip: To extend html content behind the safe area, set `viewport-fit=cover`

.pt-safe {
padding-top: env(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}

@@ -113,3 +113,3 @@ ```

.pr-safe-offset-4 {
padding-right: calc(env(safe-area-inset-right) + 1rem);
padding-right: calc(env(safe-area-inset-right) + 1rem);
}

@@ -128,3 +128,3 @@ ```

.pb-safe-or-8 {
padding-bottom: max(env(safe-area-inset-bottom), 2rem);
padding-bottom: max(env(safe-area-inset-bottom), 2rem);
}

@@ -145,15 +145,15 @@ ```

@layer base {
html {
height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
body {
height: -webkit-fill-available;
}
body {
height: -webkit-fill-available;
}
/* If using React, set height on the root div as well */
#root {
height: -webkit-fill-available;
}
/* If using React, set height on the root div as well */
#root {
height: -webkit-fill-available;
}
}
```