LaravelにTailwindを組み込む

LaravelプロジェクトにTailwindを組み込んでみます。

1. インストール

npm経由でtailwindcssとそれにまつわるライブラリを開発用として入れます。

npm install -D tailwindcss postcss autoprefixer

ついでに見た目をいい感じにしてくれるライブラリ「daisyUI」も入れましょう。
こっちは開発じゃなく通常で入れます。

npm install daisyui

TailwindCSSのセットアップファイルを作ります。

npx tailwindcss init -p

tailwind.config.jsが出来上がります。

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 設定

設定していきます。まずはさっきつくったtailwind.config.jsをこのようにします。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/views/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.css",
  ],
  theme: {
  },
  plugins: [
      require('daisyui')
  ],
  daisyui: {},
}

contentには、tailwindのコードを書くbladeファイルの場所を指定します。
また、読み込み用の.jsと.cssも一緒に指定します。

次にベースのapp.cssを作成します。

@tailwind base;
@tailwind components;
@tailwind utilities;

これで設定完了です。
一度開発サーバーを起動してみます。

npm run dev

無事起動しました。
bladeファイルを更新すると自動でビルドされます。

ちなみに、tailwind.config.jsのcontent:部分に対象の場所を指定しないと、
tailwindcssは反映しないので注意！

3. bladeに反映

bladeに反映させる場合には@viteを使います。
cssを直接指定しないんですね。
こんな感じでhead内に入れてあげます。

@vite('resources/css/app.css')

指定されたアドレスにブラウザでアクセスするとtailwindcssが反映されますね。
逆に、反映されてない場合はこれがないか、もしくはtailwind.config.jsのcontentに入っていない可能性がありますね。

本番時には以下のコマンドを実行してあげます。

npm run build

public/buildの中に書き出されますが、@viteでよしなにやってくれるので、
特に気にする必要はありません。

今回は以上です！