はじめに
Laravel9でTailwind CSSを利用するまでの手順をまとめます。
実行環境はmacOS Monterey（12.1）です。
手順
まずはターミナルで作業します。
composer create-project laravel/laravel [プロジェクト名]で作ったLaravelのプロジェクト配下に移動します。
そして以下のコマンドを実行します。
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
するとtailwind.config.jsとpostcss.config.jsがプロジェクト配下に作られます。
次にtailwind.config.jsを以下のように編集します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
+ './resources/**/*.blade.php',
+ './resources/**/*.js',
+ './resources/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}
ちなみにTailwindと互換性のあるペジネーションを実装する場合は、contentキーにさらに'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',を追記します。
次に/resources/css/app.cssを以下のように編集します。
@tailwind base;
@tailwind components;
@tailwind utilities;
そしてターミナルに戻り以下のコマンドを実行します。
> npm run dev
最後に/resources/views/layouts/app.blade.phpの<head></head>内に以下を追記します。
<head>
・・・
@vite([・・・, 'resources/css/app.css'])
・・・
</head>
以上でTailwind CSSを利用するまでの準備は完了です。
最後まで読んでいただきありがとうございました。
参考