{"id":16632684,"url":"https://github.com/mvllow/tailwindcss-safe-area","last_synced_at":"2025-04-04T10:06:11.835Z","repository":{"id":75678936,"uuid":"339230782","full_name":"mvllow/tailwindcss-safe-area","owner":"mvllow","description":"Tailwind CSS utilities for safe areas","archived":false,"fork":false,"pushed_at":"2024-08-25T17:31:24.000Z","size":53,"stargazers_count":169,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T09:03:09.547Z","etag":null,"topics":["pwa","safe-area","safe-area-inset","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mvllow.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-15T23:02:15.000Z","updated_at":"2025-02-25T01:30:45.000Z","dependencies_parsed_at":"2024-06-18T20:04:36.295Z","dependency_job_id":"3e1a9201-ff7d-449a-8230-60eb3cef1ac2","html_url":"https://github.com/mvllow/tailwindcss-safe-area","commit_stats":{"total_commits":48,"total_committers":12,"mean_commits":4.0,"dds":0.3125,"last_synced_commit":"fa9fa96535263636f428936f7e3fab0712604f05"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvllow%2Ftailwindcss-safe-area","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvllow%2Ftailwindcss-safe-area/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvllow%2Ftailwindcss-safe-area/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvllow%2Ftailwindcss-safe-area/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvllow","download_url":"https://codeload.github.com/mvllow/tailwindcss-safe-area/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247150711,"owners_count":20892189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pwa","safe-area","safe-area-inset","tailwindcss","tailwindcss-plugin"],"created_at":"2024-10-12T05:06:23.783Z","updated_at":"2025-04-04T10:06:11.816Z","avatar_url":"https://github.com/mvllow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-safe-area\n\nTailwind CSS utilities for safe areas.\n\n## Features\n\n- **Responsive safe area utilities** tailored for margin, padding, height and position\n- **Flexible spacing helpers** to extend safe areas or ensure content remains unobstructed with offset and minimum value variants\n- **Modern CSS support**, including `inline-start`, `inline-end`, `scroll-margin`, `scroll-padding` and more to handle modern layouts\n\n## Getting started\n\n```sh\nnpm install --dev tailwindcss-safe-area\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n\ttheme: {},\n\tplugins: [require(\"tailwindcss-safe-area\")],\n};\n```\n\n## Usage\n\nTo extend content behind the safe area, add or append `viewport-fit=cover` to your viewport meta tag:\n\n```html\n\u003cmeta\n\tname=\"viewport\"\n\tcontent=\"width=device-width, initial-scale=1, viewport-fit=cover\"\n/\u003e\n```\n\n### Base utilities\n\nHandle safe area margin, padding, height and position.\n\n```html\n\u003cheader class=\"pt-safe\"\u003e...\u003c/header\u003e\n\u003cmain class=\"px-safe\"\u003e...\u003c/main\u003e\n\u003cfooter class=\"pb-safe\"\u003e...\u003c/footer\u003e\n```\n\n### Offset utilities\n\nExtend base utilities with an additional offset.\n\n```html\n\u003cdiv class=\"pr-safe-offset-4\"\u003e...\u003c/div\u003e\n```\n\nThis adds right padding equal to the safe area plus `4`.\n\n### Or utilities\n\nApply a minimum value while respecting the safe area.\n\n```html\n\u003cdiv class=\"pb-safe-or-8\"\u003e...\u003c/div\u003e\n```\n\nThis adds bottom padding equal to the larger of the safe area or `8`.\n\n## Generated styles\n\n### Margin\n\n```css\n.m-safe {\n\tmargin-top: env(safe-area-inset-top);\n\tmargin-right: env(safe-area-inset-right);\n\tmargin-bottom: env(safe-area-inset-bottom);\n\tmargin-left: env(safe-area-inset-left);\n}\n.mx-safe {\n\tmargin-right: env(safe-area-inset-right);\n\tmargin-left: env(safe-area-inset-left);\n}\n.my-safe {\n\tmargin-top: env(safe-area-inset-top);\n\tmargin-bottom: env(safe-area-inset-bottom);\n}\n.ms-safe {\n\tmargin-inline-start: env(safe-area-inset-left);\n}\n.me-safe {\n\tmargin-inline-end: env(safe-area-inset-left);\n}\n.mt-safe {\n\tmargin-top: env(safe-area-inset-top);\n}\n.mr-safe {\n\tmargin-right: env(safe-area-inset-right);\n}\n.mb-safe {\n\tmargin-bottom: env(safe-area-inset-bottom);\n}\n.ml-safe {\n\tmargin-left: env(safe-area-inset-left);\n}\n```\n\n### Scroll margin\n\nSame as [margin](#margin), prefixed with `scroll-`.\n\n### Padding\n\n```css\n.p-safe {\n\tpadding-top: env(safe-area-inset-top);\n\tpadding-right: env(safe-area-inset-right);\n\tpadding-bottom: env(safe-area-inset-bottom);\n\tpadding-left: env(safe-area-inset-left);\n}\n.px-safe {\n\tpadding-right: env(safe-area-inset-right);\n\tpadding-left: env(safe-area-inset-left);\n}\n.py-safe {\n\tpadding-top: env(safe-area-inset-top);\n\tpadding-bottom: env(safe-area-inset-bottom);\n}\n.ps-safe {\n\tpadding-inline-start: env(safe-area-inset-left);\n}\n.pe-safe {\n\tpadding-inline-end: env(safe-area-inset-left);\n}\n.pt-safe {\n\tpadding-top: env(safe-area-inset-top);\n}\n.pr-safe {\n\tpadding-right: env(safe-area-inset-right);\n}\n.pb-safe {\n\tpadding-bottom: env(safe-area-inset-bottom);\n}\n.pl-safe {\n\tpadding-left: env(safe-area-inset-left);\n}\n```\n\n### Scroll padding\n\nSame as [padding](#padding), prefixed with `scroll-`.\n\n### Height\n\n```css\n.min-h-screen-safe {\n\tmin-height: calc(\n\t\t100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))\n\t);\n\tmin-height: -webkit-fill-available;\n}\n.max-h-screen-safe {\n\tmax-height: calc(\n\t\t100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))\n\t);\n\tmax-height: -webkit-fill-available;\n}\n.h-screen-safe {\n\theight: calc(\n\t\t100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))\n\t);\n\theight: -webkit-fill-available;\n}\n```\n\n### Position\n\n```css\n.inset-safe: {\n\ttop: env(safe-area-inset-top);\n\tright: env(safe-area-inset-right);\n\tbottom: env(safe-area-inset-bottom);\n\tleft: env(safe-area-inset-left);\n}\n.inset-x-safe: {\n\tright: env(safe-area-inset-right);\n\tleft: env(safe-area-inset-left);\n}\n.inset-y-safe: {\n\ttop: env(safe-area-inset-top);\n\tbottom: env(safe-area-inset-bottom);\n}\n.start-safe: {\n\tinset-inline-start: env(safe-area-inset-left);\n}\n.end-safe: {\n\tinset-inline-end: env(safe-area-inset-left);\n}\n.top-safe: {\n\ttop: env(safe-area-inset-top);\n}\n.right-safe: {\n\tright: env(safe-area-inset-right);\n}\n.bottom-safe: {\n\tbottom: env(safe-area-inset-bottom);\n}\n.left-safe: {\n\tleft: env(safe-area-inset-left);\n}\n```\n\n### Variants\n\nSpacing-based utiltiies can be augmented with either `-offset-{value}` or `-or-{value}` suffixes.\n\nFor example, using Tailwind's default spacing scale:\n\n```css\n.mr-safe-offset-8 {\n\tmargin-right: calc(env(safe-area-inset-right) + 2rem);\n}\n.pb-safe-or-20 {\n\tpadding-bottom: max(env(safe-area-inset-right), 5rem);\n}\n```\n\n## Troubleshooting\n\nThe height utilities may not always work as expected. Add the following global CSS for the correct behaviour:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n\thtml,\n\tbody,\n\t#root {\n\t\theight: -webkit-fill-available;\n\t}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvllow%2Ftailwindcss-safe-area","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvllow%2Ftailwindcss-safe-area","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvllow%2Ftailwindcss-safe-area/lists"}