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

先日紹介した「FlowBite」(紹介記事)を使用して、Tailwind CSSでUIコンポーネントを実装する方法を紹介します。

Tailwind CSSのユーティリティクラスで実装された基本コンポーネントがFlowBiteに用意されているので、初めての人でもコピペで簡単に実装できます。

Tailwind CSSが初めての人でも簡単! UIコンポーネントを実装するチュートリアル -FlowBiteの始め方

Tailwind CSS Components Tutorial – How to get started with FlowBite
by Zoltán Szőgyényi

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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経由で含めます。

このステップが正しく行われていれば、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を組み込むことです。前述で解説したので、すでに外部ファイルが記述されているとものとして進めます。

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

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

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

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

ここまでの実装

ここまでの実装

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

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

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

コピペするだけで、完成です!

FlowBiteとTailwind CSSで実装された認証ページ

FlowBiteとTailwind CSSで実装された認証ページ

Tailwind CSSとFlowBiteの両方を使用して、ページが完成しました。よく使用されるコンポーネントを何度も作る必要がないということが、あなたのプロジェクトにどれだけ役立つか想像してみてください。

終わりに

この記事では、FlowBiteがどのようなものか、そしてFlowBiteを使用してTailwind CSSの開発フローをさらに強化、高速化するためにどのように利用できるかを理解していただければ幸いです。

経験豊富なデベロッパーがライブラリを使用している様子を見たい方は、YouTubeにFlowBiteに関する動画がありますので、チェックしてみてください。

Tailwind CSSをさらにアップグレードしたい人のために、FlowBiteのプロバージョンも用意されています。このプロバージョンにはFigmaのデザインキットも含まれており、コーディングする前にWebサイトのデザインを試作するのに使用できます。

サイトのキャプチャ

FlowBite Pro

また、プロジェクトをより早く開始するのに役立つアプリケーションUI、マーケティングUI、Eコマースページなども数多く提供されます。FlowBiteのオープンソース版とプロ版の違いは比較表をご覧ください。

sponsors

top of page

©2021 coliss