{"repo":"mvllow/tailwindcss-safe-area","free":true,"listed":false,"github":"https://github.com/mvllow/tailwindcss-safe-area","clone":"git clone https://github.com/mvllow/tailwindcss-safe-area.git","description":"Tailwind CSS utilities for safe areas","language":"CSS","stars":262,"topics":["tailwindcss","tailwindcss-plugin","safe-area","pwa","safe-area-inset"],"license":"MIT","category":"ui-components","readme_excerpt":"tailwindcss-safe-area Tailwind CSS utilities for safe areas. Features - Responsive safe area utilities tailored for margin, padding, height and position - Flexible spacing helpers using offset and or variants that adapt to safe areas - Modern CSS support including logical properties and scroll snap Getting started For Tailwind CSS v4 Import the CSS plugin directly in your main CSS file: Note: we use @import above rather than @plugin For Tailwind CSS v3 Then add the plugin to your tailwind.config.js file: Usage To extend content behind the safe area, add or append viewport-fit=cover to your viewport meta tag: Base utilities Handle safe area margin, padding, height and position: Offset utilities Extend base utilities with an additional offset: This adds right padding equal to the safe area plus 4 . Or utilities Apply a minimum value while respecting the safe area: This adds bottom padding equal to the larger of the safe area or 8 . Available utilities Margin and padding - m-safe , mx-safe , my-safe , ms-safe , me-safe - mt-safe , mr-safe , mb-safe , ml-safe - p-safe , px-safe , py-safe , ps-safe , pe-safe - pt-safe , pr-safe , pb-safe , pl-safe With variants: - Add -offset-{value} for additional spacing (e.g. pt-safe-offset-4 ) - Add -or-{value} for minimum values (e.g. pb-safe-or-8 ) Scroll margin and padding Same as margin/padding utilities, prefixed with scroll- : - scroll-m-safe , scroll-mx-safe , scroll-my-safe , etc. - scroll-p-safe , scroll-px-safe , scroll-py-safe , etc","default_branch":null,"files":null,"tree":[],"storefront":"/r/mvllow","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/mvllow/tailwindcss-safe-area/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}