[ 目次 ]

• はじめに
• jsfiddleで試す
• CDNのtailwind.min.cssを読み込む
• HTML
• jsfiddleを確認

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はTailwind CSSでSticky Footerを実装する方法を試していきたいと思います。

Tailwind CSSについては、以前の「nuxt-tailwindを試してみる」という記事で説明した通り、ユーティリティーとなるclassを提供してくれています。
そのユーティリティーclassを利用して実装していきます。

Tailwind CSS

jsfiddleで試す

CDNのtailwind.min.cssを読み込む

jsfiddleのreourceとしてtailwind.min.cssを読み込みます。
今回は、以下のURLを読み込むようにしています

https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

HTML

<div class="min-h-screen flex flex-col font-sans">
  <header class="flex items-center justify-between flex-wrap bg-teal p-6">
    <div class="flex items-center flex-no-shrink text-white mr-6">
      <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
    </div>
  </header>
  <div class="flex-grow p-8 text-2xl">
    Contents
  </div>
  <footer class="bg-grey-darkest text-white p-6">
    Footer - Made with <a href="https://tailwindcss.com/" target="_blank" class="text-white hover:text-grey">Tailwind CSS</a>
  </footer>
</div>

ポイント）

• min-h-screen で高さの最小値をスクリーンサイズにします
• flex-col でflexのアイテムを縦に並べる
• flex-grow をメインのコンテンツ部分に指定して、余白をとります

jsfiddleを確認