tailwindでgrid-template-rowsをカスタムして高さ100%を実現する

こちらの記事をtailwindで実現する方法

• 参考
  • CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する
    • https://zenn.dev/catnose99/articles/a873bbbe25b15b

tailwind.config.jsの書き方

• tailwindでは限られたパターンのgrid-template-rowsしか定義されていない。なので定義にないパターンは拡張する設定をtailwind.config.jsに書く必要がある。
  • https://tailwindcss.com/docs/grid-template-rows#class-reference

/** @type {import('tailwindcss').Config} */
module.exports = {
　// content,pluginsなどは省略
  theme: {
    extend: {
      gridTemplateRows: {
        'base-layout': 'auto 1fr auto'
      }
    }
  },
}

• 公式ドキュメント
  • https://tailwindcss.com/docs/grid-template-rows#customizing-your-theme

利用側

<div class="grid grid-rows-base-layout grid-cols-1 min-h-screen">
</div>