便利なのが登場！ Tailwind CSSで実装されたOSSのUIコンポーネント集 -FlowBite
Post on:2021年11月15日
sponsors
Webサイトやスマホアプリでよく使用されるUIコンポーネントをTailwind CSSのユーティリティクラスで実装したオープンソースのライブラリを紹介します。
Tailwind CSSには、コンポーネントの基本セットがありません。FlowBiteではナビゲーションバー、カード、ボタン、ページネーション、フォームなど基本的なコンポーネントがすべて揃っています
他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。
FlowBiteの特徴
FlowBiteは、Tailwind CSSのユーティリティクラスで実装されたUIコンポーネントのライブラリです。MITライセンスで、商用プロジェクトで無料で利用できます。
UIコンポーエンとは現在、17カテゴリが用意されており、UIのプロトタイプをすばやく作成することができます。
FlowBiteのコンポーネント
FlowBiteの使い方
2通りの使い方が用意されています。
1. NPM経由で使用
Node.jsとTailwind CSSがインストールされていることを確認してください。コマンドを実行して、NPMを使用してFlowbiteを依存関係としてインストールします。
|
1 |
npm i @themesberg/flowbite |
tailwind.config.jsファイル内のプラグインとしてFlowbiteが必要です。
|
1 2 3 4 5 6 7 |
module.exports = { plugins: [ require('@themesberg/flowbite/plugin') ] } |
インタラクティブな要素を機能させるために、JavaScriptファイルを含めます。
|
1 |
<script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script> |
2. CDN経由で使用
最も簡単な方法は、CDN経由でCSSとJavaScriptをHTMLに含めることです。
|
1 2 3 4 5 6 7 8 9 |
<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> |
※flowbite.min.cssに、tailwindcss v2.2.19が含まれています。
未使用のCSSを削除する
Purge CSSを使用して、Tailwind構成ファイルで未使用のCSSを削除します。まず、CSSを削除するときに検索するファイルの種類を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
// tailwind.config.js module.exports = { purge: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ], theme: {}, variants: {}, plugins: [], } |
その後、NODE_ENVがproductionに設定されていることを確認してください。
|
1 |
NODE_ENV=production npx tailwindcss -o flowbite.css |
詳しくは、下記をご覧ください。
FlowBiteのコンポーネント
FlowBiteで使用できるコンポーネントをいくつか見てみましょう。
使用されているアイコンはSVGで、Hero Icons（MITライセンス）です。
ボタンは、アウトライン・ソリッド・角丸・丸が揃っており、アイコン付きやサイズも揃っています。
カードはシンプルなテキストのみ、テキストとボタン、画像付き、水平タイプが揃っています。
フォームはメールとパスワードのシンプルなフォームをはじめ、ラジオボタン・チェックボックス・テキストエリア・セレクト、アイコン付きの入力欄やエラー・サクセスメッセージも揃っています。
モーダル、ドロップダウン、ツールチップなどはTailwind CSSのユーティリティクラスの他に、バニラJavaScriptを少し使用しています。
ロゴとナビゲーション、ドロップダウン、検索付きが揃っています。
ページネーションはシンプルなものから、アイコン付き、前へと次へ、テーブルデータ用のものまで揃っています。
FlowBiteにはPro版（有償）もあり、さらに多くのコンポーネントやFigmaのデザインファイルが使用できます。
sponsors
