🐣
Next.jsにFlowbiteを導入する
注意
statusはclosedですが、現在も議論が続いています。
FlowBiteとは
Tailwind CSSのユーティリティクラスで実装された、UIコンポーネントのライブラリです。
導入
Next.js
Next.jsプロジェクトを作成する
npx create-next-app@latest --typescript
Tailwind CSS
インストール
npm install -D tailwindcss postcss autoprefixer
CSS設定ファイルを作成
npx tailwindcss init -p
tailwind.config.jsファイルを編集
tailwind.config.js
/**
* @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
*/
module.exports = {
content: [
"./node_modules/flowbite-react/**/*.js",
"./pages/**/*.{ts,tsx}",
"./public/**/*.html",
],
plugins: [],
theme: {},
};
style/global.cssを置換
style/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Flowbite
公式のQuickstartには、npmによる方法とCDNによる方法が記載されています。
しかし、npmによる方法は先述した通り「Next.jsにて動作しない」問題が報告されており、現時点で完全な解決に至っていません。
一方で、CDNによる方法は一応動作まで確認できたので、ここではCDNによる方法を記載します。
_document.jsに下記を追加
_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script"; // 追加
export default function Document() {
return (
<Html lang="en">
<Head>
{/* 追加 */}
<link
rel="stylesheet"
href="https://unpkg.com/flowbite@1.5.3/dist/flowbite.min.css"
/>
</Head>
<body>
<Main />
<NextScript />
{/* 追加 */}
<Script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js" />
</body>
</Html>
);
}
正しく導入されたかを確認するために、Badgeを試してみます。
index.tsx
export default function Home() {
return (
<>
<span className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
Default
</span>
<span className="bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">
Dark
</span>
<span className="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
Red
</span>
<span className="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
Green
</span>
<span className="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
Yellow
</span>
<span className="bg-indigo-100 text-indigo-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">
Indigo
</span>
<span className="bg-purple-100 text-purple-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">
Purple
</span>
<span className="bg-pink-100 text-pink-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300">
Pink
</span>
</>
);
}
表示されました。
flowbite-react
React/Next.js用のFlowbiteです。こちらはnpmによる方法でも動作します。
ただし、Flowbite本家の方がカスタマイズ性に優れるため、使用したいコンポーネントのオプションを事前に確認しておくことをおすすめします。
インストール
npm install flowbite flowbite-react
tailwind.config.jsに設定を追加
tailwind.config.js
/**
* @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
*/
module.exports = {
content: [
"./node_modules/flowbite-react/**/*.js", // 追加
"./pages/**/*.{ts,tsx}",
"./public/**/*.html",
],
plugins: [
require("flowbite/plugin") // 追加
],
theme: {},
};
正しく導入されたかを確認するために、Badgeを試してみます。
index.tsx
import { Badge } from "flowbite-react";
export default function Home() {
return (
<>
<div className="flex flex-wrap gap-2">
<Badge color="info">Default</Badge>
<Badge color="gray">Dark</Badge>
<Badge color="failure">Failure</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="pink">Pink</Badge>
</div>
</>
);
}
表示されました。
補足
本記事と直接の関係はありませんが、以前Flowbiteのコンポーネントを試していた際に他のcssによってFlowbite(厳密にはTailwind CSS？)のデザインが上書きされる事象を確認しています。
こちらはスクラップに書いていましたが、本記事の執筆後スクラップの方はアーカイブするので、補足としてここに載せておきます。
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
下記もおそらく類似事象です（未検証）。
Discussion