便利なのが登場! Tailwind CSSで実装されたOSSのUIコンポーネント集 -FlowBite

Webサイトやスマホアプリでよく使用されるUIコンポーネントをTailwind CSSのユーティリティクラスで実装したオープンソースのライブラリを紹介します。

Tailwind CSSには、コンポーネントの基本セットがありません。FlowBiteではナビゲーションバー、カード、ボタン、ページネーション、フォームなど基本的なコンポーネントがすべて揃っています

Tailwind CSSのユーティリティクラスで実装されたUIコンポーネント集 -FlowBite

FlowBite
FlowBite -GitHub

他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。

FlowBiteの特徴

FlowBiteは、Tailwind CSSのユーティリティクラスで実装されたUIコンポーネントのライブラリです。MITライセンスで、商用プロジェクトで無料で利用できます。

サイトのキャプチャ

FlowBite

UIコンポーエンとは現在、17カテゴリが用意されており、UIのプロトタイプをすばやく作成することができます。

FlowBiteのコンポーネント

FlowBiteのコンポーネント

FlowBiteの使い方

2通りの使い方が用意されています。

1. NPM経由で使用

Node.jsTailwind CSSがインストールされていることを確認してください。コマンドを実行して、NPMを使用してFlowbiteを依存関係としてインストールします。

tailwind.config.jsファイル内のプラグインとしてFlowbiteが必要です。

インタラクティブな要素を機能させるために、JavaScriptファイルを含めます。

2. CDN経由で使用

最も簡単な方法は、CDN経由でCSSとJavaScriptをHTMLに含めることです。

※flowbite.min.cssに、tailwindcss v2.2.19が含まれています。

未使用のCSSを削除する

Purge CSSを使用して、Tailwind構成ファイルで未使用のCSSを削除します。まず、CSSを削除するときに検索するファイルの種類を設定します。

その後、NODE_ENVproductionに設定されていることを確認してください。

詳しくは、下記をご覧ください。

サイトのキャプチャ

FlowBiteの最適化

FlowBiteのコンポーネント

FlowBiteで使用できるコンポーネントをいくつか見てみましょう。
使用されているアイコンはSVGで、Hero IconsMITライセンス)です。

サイトのキャプチャ

パンくず

ボタンは、アウトライン・ソリッド・角丸・丸が揃っており、アイコン付きやサイズも揃っています。

サイトのキャプチャ

ボタン

カードはシンプルなテキストのみ、テキストとボタン、画像付き、水平タイプが揃っています。

サイトのキャプチャ

カード

フォームはメールとパスワードのシンプルなフォームをはじめ、ラジオボタン・チェックボックス・テキストエリア・セレクト、アイコン付きの入力欄やエラー・サクセスメッセージも揃っています。

サイトのキャプチャ

フォーム

モーダル、ドロップダウン、ツールチップなどはTailwind CSSのユーティリティクラスの他に、バニラJavaScriptを少し使用しています。

サイトのキャプチャ

モーダル

ロゴとナビゲーション、ドロップダウン、検索付きが揃っています。

サイトのキャプチャ

ナビゲーションバー

ページネーションはシンプルなものから、アイコン付き、前へと次へ、テーブルデータ用のものまで揃っています。

サイトのキャプチャ

ページネーション

FlowBiteにはPro版(有償)もあり、さらに多くのコンポーネントやFigmaのデザインファイルが使用できます。

サイトのキャプチャ

FlowBite Pro

sponsors

top of page

©2021 coliss