Next.js with PostCSS 100vh Fix

This has always been a potential ui bug on iOS devices, 100vh problem.
The iOS menu bar at the bottom on the screen needs viewport hight correction.
But how? Well, just install postcss-100vh-fix!

Since Next.js was born, it has been a main static site generator for many developers.
So, let me introduce you to how to apply it to your Next.js project.

Install postcss-100vh-fix

github site

yarn add -D postcss-100vh-fix

Edit postcss.config.js

Create postcss.config.js on your project root with the following contents.
I usually have tailwindcss and autoprefixer as well.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-100vh-fix': {},
  },
};

Edit CSS

At last, add the following definition to your css file.

body {
  height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available;
  }
}

So easy, right?

Related Posts