tailwindcss-safe-area

tailwindcss-safe-area

A plugin that provides utilities for adding env(safe-area-inset-{top,right,bottom,left})

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-safe-area

# Using Yarn
yarn add tailwindcss-safe-area

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-safe-area'),
    // ...
  ],
}

Usage

Use the *-safe utilities:

<header class="pt-safe">
  <h1>Ciao!</h1>
</header>

<main class="pb-safe">
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate itaque blanditiis eum
    aperiam velit eaque aliquam, ex harum quisquam. Et consequuntur ipsa accusamus provident quae
    magni, earum suscipit laboriosam aperiam!
  </p>
</main>