🙄
【Next.js】基礎から始めるNext.js API Routes【10Flowbite Setup】
【10Flowbite Setup】
YouTube: https://youtu.be/X-SjHENvAXo
今回は「Flowbite」を「Next.js」で使用できるようにセッティングを行います。
上記のセッティングができましたら、
最後に「heroicons」のインストールもお願いします。
インストールコマンド
npm install flowbite flowbite-react --save
npm install @heroicons/react
package.json
"dependencies": {
"@heroicons/react": "^2.0.13",
"flowbite": "^1.5.5",
"flowbite-react": "^0.3.7",
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"tailwindcss": "^3.2.4"
}
「Flowbite」のセッティングは「tailwind.config.js」のファイルに行います。
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./node_modules/flowbite-react/**/*.js',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
}
Discussion