Memo

メモ > 技術 > フレームワーク: Laravel9 > Laravel Mix

Laravel Mix

環境を確認

$ sail node -v
v18.20.0
$ sail npm install

開発用にビルドする場合

$ sail npm run dev

公開用にビルドする場合

$ sail npm run build

Tailwind CSSを導入（Laravel Breezeを導入した場合、一緒に導入されている）

$ sail npm install -D tailwindcss
$ sail npx tailwindcss init

ヘッダタグ内に以下を記述すると、CSSを読み込める

        @vite(['resources/css/app.css', 'resources/js/app.js'])

一例だがbody内の要素全体を以下で囲うと、画面の見た目が変化する

        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
            <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">

            </div>
        </div>

Memo

Advertisement