tailwindcss-safe-area
Advanced tools
Comparing version
{ | ||
"name": "tailwindcss-safe-area", | ||
"version": "0.1.2", | ||
"version": "0.1.3", | ||
"main": "src/index.js", | ||
"license": "MIT", | ||
"repository": "https://github.com/mvllow/tailwindcss-safe-area", | ||
"keywords": [ | ||
"tailwindcss", | ||
"safe-area-inset", | ||
"margin", | ||
"padding" | ||
], | ||
"prettier": { | ||
@@ -8,0 +14,0 @@ "printWidth": 100, |
# tailwindcss-safe-area | ||
A plugin that provides utilities for adding env(safe-area-inset-{top,right,bottom,left}) | ||
Safe area inset utilities using the existing padding/margin syntax | ||
## Installation | ||
## Getting started | ||
Install the plugin from npm: | ||
```sh | ||
# Using npm | ||
npm install tailwindcss-safe-area | ||
# Using Yarn | ||
yarn add tailwindcss-safe-area | ||
npm install --dev tailwindcss-safe-area | ||
``` | ||
@@ -34,4 +28,3 @@ | ||
> Shares the same api as margin (`m`) & padding (`p`) | ||
> Examples: `m-safe` `px-safe` `pb-safe` | ||
This plugin extends the padding and margin utilities. | ||
@@ -53,1 +46,13 @@ Use the `*-safe` utilities: | ||
``` | ||
## Provided utilities | ||
| 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)` | |
57
9.62%6979
-19.07%6
-25%143
-26.29%