{"id":22823280,"url":"https://github.com/rvxlab/tailwind-plugin-ios-full-height","last_synced_at":"2025-08-10T12:32:22.716Z","repository":{"id":44883083,"uuid":"330622098","full_name":"RVxLab/tailwind-plugin-ios-full-height","owner":"RVxLab","description":"A TailwindCSS plugin to add utilities for 100vh on iOS - Supports TailwindCSS 1.2+","archived":false,"fork":false,"pushed_at":"2023-02-18T11:34:09.000Z","size":6,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-08T19:59:10.035Z","etag":null,"topics":["css","ios","tailwindcss"],"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/RVxLab.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-01-18T09:52:44.000Z","updated_at":"2024-06-26T08:18:32.000Z","dependencies_parsed_at":"2024-06-18T18:37:26.429Z","dependency_job_id":"b0cf4499-38b9-4e84-93a5-a5ececc0054c","html_url":"https://github.com/RVxLab/tailwind-plugin-ios-full-height","commit_stats":{"total_commits":6,"total_committers":3,"mean_commits":2.0,"dds":0.5,"last_synced_commit":"12e54ce67dc42c8122c739d2853cca8472d7f953"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVxLab%2Ftailwind-plugin-ios-full-height","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVxLab%2Ftailwind-plugin-ios-full-height/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVxLab%2Ftailwind-plugin-ios-full-height/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVxLab%2Ftailwind-plugin-ios-full-height/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RVxLab","download_url":"https://codeload.github.com/RVxLab/tailwind-plugin-ios-full-height/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229412546,"owners_count":18068943,"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":["css","ios","tailwindcss"],"created_at":"2024-12-12T16:16:11.731Z","updated_at":"2025-08-10T12:32:22.705Z","avatar_url":"https://github.com/RVxLab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Plugin for correct full height on iOS\n\n![Latest version](https://img.shields.io/npm/v/@rvxlab/tailwind-plugin-ios-full-height?label=NPM\u0026style=flat-square)\n![Supported TailwindCSS versions](https://img.shields.io/npm/dependency-version/@rvxlab/tailwind-plugin-ios-full-height/peer/tailwindcss?label=TailwindCSS\u0026style=flat-square)\n![Weekly downloads](https://img.shields.io/npm/dw/@rvxlab/tailwind-plugin-ios-full-height?label=Weekly%20downloads\u0026style=flat-square)\n![Total downloads](https://img.shields.io/npm/dt/@rvxlab/tailwind-plugin-ios-full-height?label=Total%20downloads\u0026style=flat-square)\n\nA TailwindCSS plugin to add utilities for 100vh on iOS\n\n## Deprecated\n\nWith Tailwind 4 now out, the team intending to use CSS for plugins and [the `svh` unit having broad support](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_small), it's time to sunset this plugin. \n\nFeel free to keep using this plugin, it's not going anywhere, but you're better off using the [`min-h-svh`](https://tailwindcss.com/docs/min-height) class introduced in TailwindCSS 3.4, or add it yourself if below that version. \n\n## About\n\nA \"feature\" of WebKit is that on iOS the screen flows a bit onder the main viewport. This was [reported as a bug](https://bugs.webkit.org/show_bug.cgi?id=141832) on the WebKit bug tracker and closed as WontFix.\n\nTo fix this, there is a CSS property you can use:\n\n```css\n.some-element {\n    height: -webkit-fill-available;\n}\n```\n\nThe issue with this is that it also targets Chrome, which is exactly what you don't want in this case. To go around it you can support an `@supports` rule to specifically target mobile:\n\n```css\n@supports (-webkit-touch-callout: none) {\n    .some-element {\n        height: -webkit-fill-available;\n    }\n}\n```\n\nThis plugin aims to make it easier to apply in TailwindCSS.\n\n## Installation\n\nRun one of these:\n\n```sh\nnpm i -D @rvxlab/tailwind-plugin-ios-full-height\n\n# or\n\nyarn add -D @rvxlab/tailwind-plugin-ios-full-height\n```\n\nThen add it to your plugins:\n\n```js\nconst iOSHeight = require('@rvxlab/tailwind-plugin-ios-full-height');\n\nmodule.exports = {\n    // ... your config\n    plugins: [\n        // ... your plugins\n        iOSHeight,\n    ],\n};\n```\n\n## Usage\n\nThis plugin adds 2 utility classes:\n\n- min-h-screen-ios\n- h-screen-ios\n\nAdd them by their class name or use `@apply`.\n\n```html\n\u003cdiv class=\"h-screen-ios min-h-screen-ios\"\u003e\u003c/div\u003e\n```\n\n```css\n.some-element {\n    @apply h-screen-ios min-h-screen-ios;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvxlab%2Ftailwind-plugin-ios-full-height","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frvxlab%2Ftailwind-plugin-ios-full-height","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvxlab%2Ftailwind-plugin-ios-full-height/lists"}