[Laravel10 + Vite +Tailwind]で本番環境を作る #Laravel

やること

Laravelで開発したアプリをEC2を使ってデプロイした際に、本番環境でTailwindが反映させる。
Laravel9からLaravel MixがViteに置き換わり、今回初めて使用したのでその備忘録として記録します。

Tailwindをインストール

公式の手順に従いTailwindをインストールする

手順い従い、各ファイルに必要なコードを追記する。

コンパイル設定を追記する

vite.config.jsファイルに以下を追記し、コンパイルされるように設定する。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css', //ここを追記
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),

レイアウトファイルに@vite('resources/css/app.css')を追記し、コンパイルされたTailwindが読み込まれるように設定する。

app.blade.php

<head>
	<title>@yield('title')</title>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	@vite('resources/css/app.css')
</head>

本番環境用にbuildする

Viteを使用して、Tailwindをインストールした際に、自動的にdevとbuildのスクリプトが設定されているので、buildを使用して、本番環境にbuildする。

npm run build

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
 
}