Next.js に、Flowbite をインストールしてうまく動作しなかったのでまとめました。
分かってしまえば、公式サイトのとおりでした。
tailwind.config.js は、公式サイトの通りに変更すると良いと思います。
理解すると、公式サイトどおり！
1. インストール
|
1 |
npm install --save autoprefixer postcss tailwindcss flowbite flowbite-react |
2. postcss.config.js の作成
|
1 2 3 4 5 6 |
module.exports = { plugins: { autoprefixer: {}, tailwindcss: {}, }, }; |
3. tailwind.config.js の作成
|
1 2 3 4 5 6 7 8 |
/** * @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: {}, }; |
4. styles/globals.css の変更
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
5. flowbite-react のサンプル
|
1 2 3 4 5 6 7 |
'use client'; import { Alert } from 'flowbite-react'; export default function MyPage() { return <Alert color="info">Alert!</Alert>; } |
公式サイト
Use with Next.js - Flowbite React
https://www.flowbite-react.com/docs/getting-started/nextjs
