📌

CSS単位「dvh」をTailwind CSSに適用してみた

2022/06/09に公開2

はじめに

Next.js(React) + Tailwind CSSでフロントエンド開発をしている時に、GoogleChromeのデベロッパーツールでiPhone用にレスポンシブ対応の確認をしても実機でうまく高さが合わせられない事があり、Futa Ogawaさんの以下の記事を参考にして、Tailwind CSSでなるべく簡単に実装できる方法がないか試してみましたのでその結果を共有します!

https://zenn.dev/futa/articles/90d7410650a73e

変更した内容

Tailwind CSSにはデフォルトでh-screenというクラスが定義されていますが、height: 100vhにしか対応していないため、height: 100dvhを追加するようにクラスを以下のように拡張しました!

tailwind.config.js
module.exports = {
  ...
+  theme: {
+    extend: {
+      height: {
+        'screen': [
+          '100vh','100dvh'
+        ]
+      },
+      minHeight: {
+        'screen': [
+          '100vh','100dvh'
+        ]
+      },
+      maxHeight: {
+        'screen': [
+          '100vh','100dvh'
+        ]
+      }
+    },
+  },
  ...
};
コピペ用
tailwind.config.js
module.exports = {
  ...
  theme: {
    extend: {
      height: {
        'screen': [
          '100vh','100dvh'
        ]
      },
      minHeight: {
        'screen': [
          '100vh','100dvh'
        ]
      },
      maxHeight: {
        'screen': [
          '100vh','100dvh'
        ]
      }
    },
  },
  ...
};

上記の設定を適用することでh-screenのクラス定義が以下のようになります。

/* デフォルト */
.h-screen {
  height: 100vh;
}

/* 拡張したクラス定義 */
.h-screen {
  height: 100vh; /* iPhoneのブラウザ以外ではこちらが適用される */
+  height: 100dvh;
}

さいごに

Tailwind CSSのクラスを今回のように拡張することで、既存コードを変更せずにスタイルを調整することができると思いますので、是非試してみていただければと思います!

また、バージョンによってうまく動作しないパターンもあるかと思いますので試してみた結果などコメントもいただけると嬉しいです!

GitHubで編集を提案

Discussion

こにゃるこにゃる

ずっとiOSの高さが整えられず、納期が迫ってきてストレスで死ぬかと思ってましたが、おかげで無事に解消しました!!!
本当にありがとうございます!!

cti1650cti1650

公式で実装された時になるべく修正箇所を減らしたいとの思いで公式ドキュメントを読み漁ってこの方法を思いつきましたが英語が苦手なため目的を実装するための方法にたどり着くのに結構時間がかかったのでこの記事がお役に立てて凄く嬉しいです!✨

本当はTailwindcss側が公式で標準搭載してもらえるとありがたいのでそのうちこの記事が不要になる事を願っております🙏w