メモ > 技術 > フレームワーク: 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>
Advertisement