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

はじめに

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

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