Современный frontend в Laravel строится вокруг:

Vite;
Tailwind CSS;
React или Vue;
Hot Module Reloading.

Laravel полностью отказался от Laravel Mix в пользу Vite, что значительно ускорило frontend-разработку.

В этой статье разберём настройку Laravel Vite и Tailwind CSS.

Что такое Laravel Vite

Vite — современный frontend bundler.

Преимущества:

очень быстрый dev server;
мгновенный hot reload;
быстрая production-сборка;
удобная работа с React и Vue.

Установка зависимостей

После установки Laravel:

npm install

Запуск Vite

npm run dev

Production build:

npm run build

Где находится frontend код

Laravel использует:

resources/js
resources/css

Подключение Vite в Blade

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

Установка Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Настройка Tailwind

Создайте:

tailwind.config.js

Подключение Tailwind

Файл:

@import "tailwindcss";

Пример Tailwind UI

<div class="max-w-4xl mx-auto p-6">

</div>

Почему Tailwind стал стандартом Laravel

Tailwind идеально подходит для:

Blade;
React;
Vue;
Inertia.js;
SaaS интерфейсов.

Hot Reload в Laravel Vite

При изменении файлов браузер обновляется автоматически.

Это значительно ускоряет frontend-разработку.

Laravel React Vite

Для React:

npm install react react-dom

Laravel Vue Vite

Для Vue:

npm install vue

Production Build

Перед deploy:

npm run build

Laravel создаст оптимизированные assets.

Code Splitting

Vite автоматически поддерживает:

lazy loading;
code splitting;
tree shaking.

PostCSS и Autoprefixer

Tailwind использует:

PostCSS;
Autoprefixer.

Оптимизация frontend

Рекомендуется:

минимизировать JS bundle;
использовать lazy imports;
оптимизировать изображения;
использовать кеширование assets.

Laravel Tailwind для админок

Tailwind особенно популярен в:

CRM;
dashboards;
SaaS;
admin panels.

Лучшие практики Vite