目的
Laravel 11 で Vite と Tailwind の設定をします。
環境
[momonga@momonga momonga]$ php artisan -V
Laravel Framework 11.14.0
[momonga@momonga momonga]$ node -v
v20.12.2
[momonga@momonga momonga]$ npm -v
10.5.0
参考
手順
1. viteとLaravelプラグインのインストール
Laravelインストール時にpackage.jsonも生成されるのでそのままインストールを実行します。
[momonga@momonga momonga]$ npm install
一応package.jsonの中身を確認
package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.6.4",
"laravel-vite-plugin": "^1.0",
"vite": "^5.0"
}
}
2. Tailwind CSSと公式プラグインのインストール
Tailwind本体とプラグインをインストールします。
[momonga@momonga momonga]$ npm install -D tailwindcss postcss autoprefixer
[momonga@momonga momonga]$ npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
3. 設定ファイル作成と編集
Tailwindの設定ファイルを生成します。
-pオプション: postcssの設定ファイルを生成
[momonga@momonga momonga]$ npx tailwindcss init -p
tailfwind.config.js の編集内容
tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
theme: {
extend: {},
},
plugins: [
typography,
forms,
aspectRatio,
],
}
4. CSSにTailwindディレクティブを追加
app.css
/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
5. bladeに表示
index.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Project</title>
<!-- Stylesheet -->
@vite('resources/css/app.css')
</head>
<body>
<!-- Your content -->
</body>
</html>