第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>

これが、

before

こうなってれば、

after

導入成功です。