Tailwind CSSの特徴
Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。
ボタン、フォーム、カード、ナビゲーションバーなど、Webサイトやブログで使用されるUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するフレームワークです。
Bootstrap、Foundation、Bulmaなどとは異なり、UIキットではありません。

「UIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するフレームワーク」「 Bootstrap、Foundation、Bulmaなどとは異なり、UIキットではありません。」というところが今まで私が使ってきたものと異なることを表していますね。

【私の認識では・・・】
Bootstrap、BulmaなどUIフレームワークにはフッター用のデザインが用意されています。これはUIキットだから用意されているものだと私は認識しています。今回のTailwindはUIコンポーネントなのでフッターは用意されておりません。Tailwindで提供しているUIコンポーネントと独自のスタイルを組み合わせてフッターは作るのだと思います。
ここがUIキットとUIコンポーネントの違いではないでしょうか！？

上記サイトに記載がありますが、以下の特徴も覚えておきたい重要項目です！！

ユーティリティファースト

このカードコンポーネントはTailwind CSSのユーティリティとなるclassを使って実装されたもので、他のスタイルシートは必要ありません

コンポーネントフレンドリー

コンポーネントを作成したユーティリティのclassは、それらをまとめて更新・管理することもでき、コンポーネント用のスタイルとして利用できます。

レスポンシブに完全対応

Tailwind CSSで使用するユーティリティのclassはすべて、レスポンシブ対応です。HTMLに手を加えることなく、レスポンシブ対応のインターフェイスを実装できます。

それでは、試していきつつ理解を深めましょう。
今回はNuxt.js を利用するので以下のページに沿ってインストールから進めていきます。
vue-cliが使える状態が前提です。

https://github.com/sgraewe/nuxt-tailwind

プロジェクト作成

$ vue init sgraewe/nuxt-tailwind my-nuxt-tailwind
$ cd my-nuxt-tailwind
# install dependencies
$ npm install # yarn

初期画面は？

devモードで起動してみましょう。

$ yarn dev

真っ白でした笑
pages/index.vueのtemplateにはデフォルトは空の状態です。

<template>
  <div>

  </div>
</template>

<script>
export default {
  head: {
    title: 'Welcome',
    meta: [{ hid: 'description', name: 'description', content: 'Welcome' }]
  }
}
</script>

starter-template のようなデフォルトの画面が用意しているのかと思っておりました・・・

tailwindの設定などファイルを確認

postcss.config.js

tailwindcssを読み込むためのwebpackプラグインの設定
公式サイトのこちらをご確認ください。

tailwind.config.js

tailwindの設定ファイル。各UIコンポーネントの設定が定義されています。
公式サイトのこちらをご確認ください。

CSS構成（assets/css/main.css etc）

インストール後以下の構成のcssファイルが作成されます。
デフォルトでは、Tailwind CSS のコンポーネントが読み込まれるようになっています。

assets/css
 | 
 |+- main.css
 |+- _tailwind-components.css
 |+- _tailwind-preflight.css
 |+- _tailwind-utilities.css

簡単なデザインを組み込む

※ サンプルなので特にコンポーネント分けは意識せず対応します。

ヘッダー

こちらを参考に進めていきます。
layouts/default.vueにヘッダーを組み込みます。

<template>
  <div>
    <nav 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>
      <div class="block lg:hidden">
        <button
          class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white"
          @click="drawer = !drawer"
        >
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div
        class="w-full lg:visible block flex-grow lg:flex lg:items-center lg:w-auto"
        :class="{ 'hidden': !drawer }"
      >
        <div class="text-sm lg:flex-grow">
          <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
            Docs
          </a>
          <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
            Examples
          </a>
          <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
            Blog
          </a>
        </div>
        <div>
          <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
        </div>
      </div>
    </nav>
    
    <nuxt/>
  </div>
</template>

<script>
  export default {
    data: () => ({
      drawer: true,
    })
}
</script>

<style>
html {
  background-color: config('colors.white');
  font-family: config('fonts.sans');
}
</style>

メインページ

Container
Grids - Responsive Grids
Alerts - Banner
Cards - Stacked

こちらの機能を使ってカードの一覧ページを作ります。
以下のようにpages/index.vueを修正していきます。

<template>
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap mt-4 mb-10">
      <div class="w-full bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3" role="alert">
        <p class="font-bold">Informational message</p>
        <p class="text-sm">Some additional text to explain said message.</p>
      </div>
    </div>
    <div class="flex flex-wrap">
      
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4 mb-4 px-1">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains">
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
            <p class="text-grey-darker text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
          </div>
          <div class="px-6 py-4">
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
          </div>
        </div>
      </div>
      
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4 mb-4 px-1">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains">
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
            <p class="text-grey-darker text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
          </div>
          <div class="px-6 py-4">
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
          </div>
        </div>
      </div>
      
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4 mb-4 px-1">
        <div class="max-w-sm rounded overflow-hidden shadow-lg">
          <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains">
          <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
            <p class="text-grey-darker text-base">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
          </div>
          <div class="px-6 py-4">
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  head: {
    title: 'Welcome',
    meta: [{ hid: 'description', name: 'description', content: 'Welcome' }]
  }
}
</script>