### Complete App Layout Example with Safe Area Utilities (HTML) Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt This HTML example demonstrates a full mobile Progressive Web App (PWA) layout utilizing multiple safe area utilities. It includes a header, main content area, and bottom navigation, all designed to respect device safe areas. ```html Safe Area App

My PWA App

Content Card 1
Content Card 2
Content Card 3
``` -------------------------------- ### Install tailwindcss-safe-area for Tailwind CSS v3 Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt Installs a specific version (0.8.0) of the tailwindcss-safe-area plugin for compatibility with Tailwind CSS v3. This command ensures you are using a version that works with older Tailwind CSS configurations. ```bash npm install tailwindcss-safe-area@0.8.0 ``` -------------------------------- ### Install tailwindcss-safe-area for Tailwind CSS v4 Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Installs the tailwindcss-safe-area package using npm for Tailwind CSS v4. This command is the first step to integrate the safe area utilities into your project. ```sh npm install tailwindcss-safe-area ``` -------------------------------- ### Apply offset variant for safe area padding Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Shows how to use the `-offset-{value}` variant with safe area utilities. This example adds right padding equal to the safe area inset plus an additional 4 units. ```html
...
``` -------------------------------- ### Apply 'or' variant for safe area padding Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Illustrates the use of the `-or-{value}` variant with safe area utilities. This example ensures a minimum bottom padding of the larger value between the safe area inset and 8 units. ```html
...
``` -------------------------------- ### Install tailwindcss-safe-area for Tailwind CSS v3 Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Installs a specific version of tailwindcss-safe-area compatible with Tailwind CSS v3 using npm. This ensures compatibility with older versions of Tailwind CSS. ```sh # Latest version with v3 support npm install tailwindcss-safe-area@0.8.0 ``` -------------------------------- ### Safe Area Position (Inset) Utilities for Tailwind CSS Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt These utilities allow elements to be positioned relative to the safe area boundaries of the screen. They support standard inset properties (top, right, bottom, left, x, y) as well as logical properties (start, end) and negative offsets. Useful for fixed headers, footers, or overlays. ```html Safe Area Position Example
Positioned at safe area boundaries (top, right, bottom, left)
Horizontal inset (left + right)
Vertical inset (top + bottom)
Fixed at safe top
Fixed at safe bottom
Positioned at safe right edge
Positioned at safe left edge
Inline-start (left in LTR)
Inline-end (right in LTR)
Extend beyond safe area
Extend above safe top
Top = safe area + 1rem
All sides = safe area + 0.5rem
Top = max(safe area, 1rem)
All sides = max(safe area, 2rem)
``` -------------------------------- ### Apply 'or' variant for safe area border Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Shows the usage of the `-or-{value}` variant with safe area border utilities. This example applies a border that respects the safe area inset, ensuring a minimum of 8 units. ```html
...
``` -------------------------------- ### Apply offset variant for safe area positioning Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Demonstrates using the `-offset-{value}` variant with safe area positioning utilities. This example applies a top position that respects the safe area inset plus an additional 4 units. ```html
...
``` -------------------------------- ### Apply 'or' variant for safe area positioning Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Illustrates using the `-or-{value}` variant with safe area positioning utilities. This example sets an inset value that is the larger of the safe area inset or 8 units. ```html
...
``` -------------------------------- ### Enable and Disable Safe Area Handling (HTML) Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt These HTML utilities control safe area CSS custom properties to enable or disable safe area handling. They allow for enabling all insets, specific directions, or disabling them entirely, with examples of conditional and override usage. ```html
Enable all safe area insets
Enable horizontal safe areas only
Enable vertical safe areas only
Enable top safe area only
Enable right safe area only
Enable bottom safe area only
Enable left safe area only
Disable all safe areas
Disable horizontal safe areas
Disable vertical safe areas
Disable top safe area
Disable right safe area
Disable bottom safe area
Disable left safe area
Safe area padding on mobile, disabled on desktop
This content ignores horizontal safe areas
``` -------------------------------- ### Configure viewport meta tag for safe area support Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt Sets up the viewport meta tag in your HTML to enable safe area support. The `viewport-fit=cover` attribute is crucial for the plugin to correctly detect and apply safe area insets. ```html ``` -------------------------------- ### Margin Utilities for Safe Area Insets (HTML) Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt Demonstrates various HTML classes provided by tailwindcss-safe-area for applying margin based on device safe area insets. Includes base, logical, negative, offset, and 'or' variants for flexible layout control. ```html
All sides margin equal to safe area
Horizontal margin (left + right)
Vertical margin (top + bottom)
Top margin only
Right margin only
Bottom margin only
Left margin only
Margin inline-start (left in LTR)
Margin inline-end (right in LTR)
Negative margin all sides
Negative top margin
Margin = safe area + 1rem
Top margin = safe area + 2rem
Margin = max(safe area, 1rem)
Bottom margin = max(safe area, 2rem)
``` -------------------------------- ### Padding Utilities for Safe Area Insets (HTML) Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt Showcases HTML classes from tailwindcss-safe-area for applying padding based on device safe area insets. Covers base, directional, logical, offset, and 'or' variants for comprehensive padding control. ```html
Top padding for status bar/notch
Horizontal padding for screen edges
Content padded from all safe area edges
Right padding only
Padding inline-start
Padding inline-end
Padding = safe area + 1rem
Top padding = safe area + 0.5rem
Horizontal padding = safe area + 1.5rem
Padding = max(safe area, 1rem)
Bottom padding = max(safe area, 1.5rem)
``` -------------------------------- ### Apply Safe Area Insets as Border Widths (HTML) Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt These HTML utilities apply safe area insets as border widths for visual effects. They include base utilities, logical properties, offset variants, and 'or' variants for flexible border styling. ```html Safe Area App
Border width equal to safe area
Horizontal border (left + right)
Vertical border (top + bottom)
Top border only
Right border only
Bottom border only
Left border only
Border inline-start
Border inline-end
Border = safe area + 1rem
Top border = safe area + 0.5rem
Border = max(safe area, 1rem)
Bottom border = max(safe area, 0.5rem)
``` -------------------------------- ### Safe Area Scroll Margin and Padding Utilities for Tailwind CSS Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt These utilities provide safe area support for scroll snap containers and targets. They allow you to apply scroll margins and paddings that account for device safe areas, preventing content from being hidden behind notches or home indicators when scrolling. Supports offset and 'or' variants. ```html Safe Area Scroll Example
Scroll margin all sides
Scroll margin horizontal
Scroll margin vertical
Scroll margin top
Scroll margin right
Scroll margin bottom
Scroll margin left
Scroll padding all sides
Scroll padding horizontal
Scroll padding vertical
Scroll padding top
Scroll padding bottom
Negative scroll margin
Negative scroll padding
Scroll margin = safe area + 1rem
Scroll padding = safe area + 0.5rem
Scroll margin = max(safe area, 1rem)
Scroll padding = max(safe area, 2rem)
Section 1
Section 2
Section 3
``` -------------------------------- ### Set viewport meta tag for safe area support Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Configures the viewport meta tag in your HTML to enable `viewport-fit=cover`. This is essential for extending content behind the safe area on mobile devices. ```html ``` -------------------------------- ### Apply base safe area utilities for margin and padding Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Demonstrates the usage of base Tailwind CSS safe area utilities for header, main, and footer elements. These classes apply padding or margin that respects the device's safe area insets. ```html
...
...
``` -------------------------------- ### Safe Area Height Utilities for Tailwind CSS Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt These utilities adjust element heights based on viewport dimensions and device safe area insets. They support various viewport units like vh, dvh, svh, lvh, and -webkit-fill-available, ensuring content is not obscured by notches or home indicators. Useful for full-screen layouts. ```html Safe Area Height Example
Height: 100vh - top safe area - bottom safe area
Minimum height with safe areas
Maximum height with safe areas
Using vh units
Using dynamic viewport height (dvh)
Using small viewport height (svh)
Using large viewport height (lvh)
Minimum dynamic viewport height
Maximum small viewport height
Height: -webkit-fill-available
Min-height: -webkit-fill-available
Max-height: -webkit-fill-available
Header with notch padding
Scrollable content
``` -------------------------------- ### Configure tailwindcss-safe-area in tailwind.config.js Source: https://context7.com/mvllow/tailwindcss-safe-area/llms.txt Configures the tailwindcss-safe-area plugin within your Tailwind CSS project. This JavaScript snippet shows how to include the plugin in your `tailwind.config.js` file, enabling its features. ```javascript module.exports = { theme: {}, plugins: [require("tailwindcss-safe-area")], }; ``` -------------------------------- ### Import tailwindcss-safe-area CSS for Tailwind CSS v4 Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Imports the tailwindcss-safe-area CSS plugin directly into your main CSS file. This method is used for Tailwind CSS v4 and utilizes the @import rule. ```css @import "tailwindcss"; @import "tailwindcss-safe-area"; ``` -------------------------------- ### Configure tailwindcss-safe-area plugin for Tailwind CSS v3 Source: https://github.com/mvllow/tailwindcss-safe-area/blob/main/README.md Adds the tailwindcss-safe-area plugin to your tailwind.config.js file for Tailwind CSS v3. This enables the safe area utilities within your project's Tailwind configuration. ```js // tailwind.config.js module.exports = { theme: {}, plugins: [require("tailwindcss-safe-area")], }; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.