Tailwind CSSが初めての人でも簡単！ UIコンポーネントを実装するチュートリアル -FlowBiteがかなり便利

Post on:2021年11月17日

はじめに

FlowBiteは、Tailwind CSSのユーティリティファーストのクラスを使用して構築されたWebコンポーネントのオープンソースライブラリです。さらにドロップダウン、モーダル、データピッカーなど、インタラクティブな要素も含まれています。

Tailwind CSSはユーティリティーファーストのクラスを使用してページを構築するのが非常に速いため、最近のWebプロジェクトでよく使用されているフレームワークです。

しかし一つ問題があり、Tailwind CSSには基本的なコンポーネントのセットが含まれていません。そのため、プロジェクトごとに何度も構築する必要がありました。

私は、FlowBiteというTailwind CSSをベースにしたコンポーネントライブラリを見つけました。FlowBiteには、ボタン、ナビゲーションバー、カード、フォーム要素など、よく使用されるコンポーネントが用意されており、Tailwind CSSのユーティリティクラスを使用して便利に構築されています。

FlowBite - Tailwind CSS component library

この記事ではTailwind CSSとFlowBiteのコンポーネントを使用して、より早くWebサイトを構築する方法を紹介したいと思います。

FlowBiteはGitHubで公開されており、MITライセンスのオープンソースです。

FlowBiteの準備

まず最初に、FlowBiteを簡単に説明します。このライブラリは独立したフレームワークではありません。Tailwind CSSをベースにしたコンポーネントのセットで、ドキュメントからコピーペーストするだけで利用できます。

Tailwind CSS Form Elements - FlowBite

モーダル、ドロップダウン、データピッカーなどのインタラクティブなコンポーネントを実装するJavaScriptファイルも含まれており、CDNやNPM経由でプロジェクトに組み込むことができます。

スタートガイドでCDNファイルをプロジェクトに含めて要素を確認することができます。ただし、FlowBiteでプロジェクトを構築する場合は、生成されたCSSをパージおよびミニマイズできるように、ビルドツールの手順に沿って実装することをお勧めします。

より簡単に始めるには、CDN経由で使用するのがお勧めです。

FlowBiteとTailwind CSSをCDN経由でインクルードする方法

CSSとJavaScriptをHTMLにCDN経由で含めます。

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@1.1.1/dist/flowbite.min.css" />
</head>
<body>
  ...
<script src="https://unpkg.com/@themesberg/flowbite@1.1.1/dist/flowbite.bundle.js"></script>
</body>
</html>

<html>

<head>

</head>

<body>

...

</body>

</html>

このステップが正しく行われていれば、Tailwind CSSとFlowBiteの両方がプロジェクトに含まれ、FlowBiteのコンポーネントがすべて動作します。
※flowbite.min.cssに、tailwindcss v2.2.19が含まれています。

FlowBiteでコンポーネントを探す

次のステップは、Tailwind CSSのユーティリティクラスを使用して実装されたコンポーネントをFlowBiteから探すことです。

アラート、ボタン、バッジをはじめ、ナビゲーションバー、モーダル、ドロップダウンメニュー、さらにはデータピッカーまで、FlowBiteにはさまざまなコンポーネントが用意されています。

FlowBite

FlowBiteのコンポーネントは、下記の通りです。

アラート
バッジ
パンくず
ボタン
ボタングループ
カード
ドロップダウン
フォーム
リストグループ
タイポグラフィ
モーダル
ナビゲーションバー
ページネーション
プログレスバー
テーブル
ツールチップ
デートピッカー

コンポーネントの一覧からすべてのコンポーネントを確認でき、ドキュメントのすべてのページからアクセスすることができます。
コンポーネントを使用するには、HTMLをコピペするだけです。

この記事では、FlowBiteのコンポーネントとTailwind CSSのユーティリティクラスを使用して、ユーザー認証ページを実装するワークフローを解説します。
実装するページは、下記の通りです。

実装するユーザー認証ページ

FlowBiteのコンポーネントを実装する方法

準備は、CDNまたはNPM経由で作業するHTMLページにFlowBiteを組み込むことです。前述で解説したので、すでに外部ファイルが記述されているとものとして進めます。

最初にラッパーを実装し、その後でロゴとメインのカード要素を実装します。

<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0">
    <!-- ここにコンテンツ -->
</div>

</div>

ラッパーは、大きなスクリーンでもすべてが水平・垂直の中央に配置されます。
次に、ロゴを配置しましょう。

<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0">
    <a href="#" class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
      <img src="https://flowbite.com/application-ui/demo/images/logo.svg" class="h-11 mr-4" alt="FlowBite Logo">
      <span>Flowbite</span>
    </a>
</div>

<span>Flowbite</span>

</a>

</div>

ロゴの後にメインのカード要素を実装し、カード内に画像を配置します。

<div class="bg-white shadow rounded-lg lg:flex items-center justify-center md:mt-0 w-full lg:max-w-screen-lg 2xl:max:max-w-screen-lg xl:p-0">
	<div class="hidden lg:flex w-2/3">
		<img class="rounded-l-lg" src="https://flowbite.com/application-ui/demo/images/authentication/login.jpg" alt="login image">
	</div>
	<div class="w-full p-6 sm:p-8 lg:p-16 lg:py-0 space-y-8">
		<!-- Authentication form goes here -->
	</div>
</div>

</div>

</div>

ここまでの実装で、下記のようになります。
ラッパー内に画像とロゴが配置されたページです。フォームは次に実装します。

ここまでの実装

Tailwind CSSのフォーム要素を実装する方法

ここでFlowBiteの出番です。2つのテキストフィールド、チェックボックス、ボタンを含むフォーム要素を実装する必要があります。FlowBiteのTailwind CSSフォーム要素を使用すれば、自分で作る必要はありません。

カードの2番目のdiv要素内にタイトルとform要素を追加します。

<h2 class="text-2xl lg:text-3xl font-bold text-gray-900">
   Sign in to platform
</h2>
<form class="mt-8 space-y-6" action="#">
   <div>
      <label for="email" class="text-sm font-medium text-gray-900 block mb-2">Your email</label>
      <input type="email" name="email" id="email"
         class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
         placeholder="name@company.com" required>
   </div>
   <div>
      <label for="password" class="text-sm font-medium text-gray-900 block mb-2">Your password</label>
      <input type="password" name="password" id="password" placeholder=""
         class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
         required>
   </div>
   <div class="flex items-start">
      <div class="flex items-center h-5">
         <input id="remember" aria-describedby="remember" name="remember" type="checkbox"
            class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" required>
      </div>
      <div class="text-sm ml-3">
         <label for="remember" class="font-medium text-gray-900">Remember me</label>
      </div>
      <a href="#" class="text-sm text-blue-700 hover:underline ml-auto">Lost Password?</a>
   </div>
   <button type="submit"
      class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">Login
   to your account</button>
   <div class="text-sm font-medium text-gray-500">
      Not registered? <a class="text-blue-700 hover:underline">Create account</a>
   </div>
</form>

</h2>

<div>

<label for="email" class="text-sm font-medium text-gray-900 block mb-2">Your email</label>

<input type="email" name="email" id="email"

class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"

placeholder="name@company.com" required>

</div>

<div>

<label for="password" class="text-sm font-medium text-gray-900 block mb-2">Your password</label>

<input type="password" name="password" id="password" placeholder=""

class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"

required>

</div>

<input id="remember" aria-describedby="remember" name="remember" type="checkbox"

class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" required>

</div>

<label for="remember" class="font-medium text-gray-900">Remember me</label>

</div>

<a href="#" class="text-sm text-blue-700 hover:underline ml-auto">Lost Password?</a>

</div>

<button type="submit"

class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">Login

to your account</button>