第16回 Laravel10 環境構築メモ(Flowbiteを使ってみる)
はじめに
今回は、即終わります。Flowbiteをinstallして動作するところまでを確認したいと思います。FlowbiteはTailwind CSSのユーティリティクラスで実装されたUIコンポーネントのライブラリだそうです。
Flowbiteをinstall
npm install flowbite
tailwind.config.jsを修正
3行追加します。
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
import forms from '@tailwindcss/forms'
import flowbitePlugin from "flowbite/plugin"; // 追加
/** @type {import('tailwindcss').Config} */
export default {
plugin:[flowbitePlugin], // 追加
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.tsx',
'./node_modules/flowbite/**/*.js' // 追加
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans]
}
}
},
plugins: [forms]
}
ちゃんと動くか確認
登録画面のSUBMITボタンで導入できてる確認してみます。
resources/js/Pages/Greeting/create.tsx
この部分を
<PrimaryButton className="ms-4" type="submit">
Submit
</PrimaryButton>
こう直すと、
<button type="submit" className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900">
Submit
</button>
これが、
こうなってれば、
導入成功です。