Laravel 12 + Vite + Tailwind v4 — Ghid Production-Ready 2026

De ce Laravel 12 + Vite + Tailwind v4 in 2026

Stack-ul asta a devenit standardul pentru aplicatii web PHP moderne. Laravel 12 vine cu o structura simplificata a fisierelor, Vite 7 aduce build-uri rapide, iar Tailwind CSS v4 foloseste un engine nou bazat pe CSS nativ, fara PostCSS config.

In acest ghid iti arat exact ce am folosit pentru anonym93.dev — un proiect Laravel 12 + Blade + Alpine.js + Filament Admin, cu Vite ca bundler doar pentru CSS.

1. Instalare Laravel 12

composer create-project laravel/laravel my-project cd my-project php artisan --version

# Laravel Framework 12.x.x

Pentru cine migreaza de la Laravel 11: structura noua nu mai are app/Console/Kernel.php sau app/Http/Kernel.php. Middleware-urile se inregistreaza acum in bootstrap/app.php:

->withMiddleware(function (Middleware $middleware) {
    $middleware->append(\App\Http\Middleware\SecurityHeaders::class);})

2. Configurare .env pentru productie

Editeaza .env.example si copiaza in .env:

APP_NAME="My Project"
APP_ENV=production
APP_DEBUG=false
APP_URL=https://example.com
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_project
DB_USERNAME=my_user
DB_PASSWORD=secret
CACHE_STORE=redis
SESSION_DRIVER=redis
QUEUE_CONNECTION=redis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=nullREDIS_PORT=6379

Genereaza cheia:

php artisan key:generate

Sfat: niciodata nu comitezi .env in git. Asigura-te ca e in .gitignore (default in Laravel).

3. Instalare Vite 7 + Tailwind CSS v4

npm install vite@^7 laravel-vite-plugin@^2npm install @tailwindcss/vite@^4 tailwindcss@^4 @tailwindcss/typography

vite.config.js

Tailwind v4 foloseste plugin-ul oficial Vite, nu mai ai nevoie de postcss.config.js:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ["resources/css/app.css"],
            refresh: true,
        }),
    ],});

resources/css/app.css

@import "tailwindcss";
@source "../views";
@theme {
    --color-primary: hsl(265, 90%, 60%);
    --color-background: hsl(240, 15%, 5%);
    --font-display: "Inter", system-ui, sans-serif;
}
@layer base {
    body {
        background-color: hsl(var(--color-background));
        color: hsl(var(--color-foreground));
    }}

Important in v4: nu mai folosesti tailwind.config.js daca nu ai plugin-uri. Configuratia e direct in CSS prin @theme.

4. Integrare in Blade

In resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? config('app.name') }}</title>
    @vite('resources/css/app.css')
</head>
<body>
    {{ $slot }}
</body></html>

5. Queue Worker + Supervisor

Pentru joburi asincrone (emails, webhooks, scheduled tasks):

php artisan queue:work --tries=3 --max-time=3600

In productie, ruleaza cu Supervisor. Creeaza /etc/supervisor/conf.d/my-project.conf:

[program:my-project-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /var/www/my-project/artisan queue:work --sleep=3 --tries=3 --max-time=3600
autostart=true
autorestart=true
user=www-data
numprocs=2
redirect_stderr=truestdout_logfile=/var/log/my-project-worker.log

Apoi:

sudo supervisorctl reread sudo supervisorctl update

sudo supervisorctl start my-project-worker:*

6. Cache si optimizare

Pentru productie, cache-uieste config, routes si views:

php artisan config:cache php artisan route:cache php artisan view:cache

php artisan event:cache

Atentie: dupa fiecare deploy trebuie sa rulezi iar aceste comenzi, sau sa le clear-uiesti daca schimbi config-uri.

7. Build pentru productie

npm run build

Output-ul merge in public/build/. Vite genereaza manifest.json cu hash-uri pentru cache busting automat.

8. Composer dev script

Laravel 12 vine cu un script dev care ruleaza tot in paralel. Editeaza composer.json:

"scripts": { "dev": [ "Composer\\Config::disableProcessTimeout", "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen\" \"php artisan pail\" \"npm run dev\" --names=server,queue,logs,vite" ]

}

Apoi pur si simplu:

composer dev

Ruleaza serverul, queue worker, log tail si Vite — toate in paralel.

9. Deployment checklist

Inainte de git push pe productie:

APP_ENV=production si APP_DEBUG=false

npm run build executat

composer install --no-dev --optimize-autoloader

php artisan migrate --force

php artisan config:cache && php artisan route:cache && php artisan view:cache

Permisiuni corecte: storage/ si bootstrap/cache/ writable de user-ul web

HTTPS configurat (Let's Encrypt / Certbot)

Queue worker pornit prin Supervisor

Concluzie

Stack-ul Laravel 12 + Vite 7 + Tailwind v4 e suficient pentru 95% din proiectele web moderne. E rapid, stabil, are ecosistem bogat si e usor de mentinut.

Pentru deployment complet pe VPS, vezi articolul Deployment Laravel pe VPS fara Docker.

Pentru migrarea de la SPA (React, Vue) la Blade, citeste Cum sa treci de la React SPA la Blade + Alpine.js.

Cum sa configurezi Laravel 12 + Vite + Tailwind v4 pentru un proiect production-ready