Jak v Laravelu funguje Vite a Tailwind CSS kompilace

Moderní asset pipeline: Vite 7 & Tailwind CSS v4

V éře moderního webového vývoje byl starý a pomalý Webpack (Laravel Mix) plně nahrazen nástrojem Vite. Vite využívá nativní ES moduly v prohlížeči, což znamená, že spuštění vývojového serveru a Hot Module Replacement (HMR) probíhá během desítek milisekund bez nutnosti předem bundleovat celou aplikaci.

V našem projektu navíc používáme zbrusu nový Tailwind CSS v4 s oficiálním pluginem @tailwindcss/vite.

resources/css/app.css ──┐
resources/js/app.js   ──┴──► Vite + @tailwindcss/vite ──► public/build/ (Optimalizováno pro produkci)
                                                                │
                                                         manifest.json
                                                                │
                                              Čte direktiva @vite v Blade

1. Rozbor konfigurace v vite.config.js

Podívej se do našeho souboru vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true, // Automatický reload při změně Blade šablon!
        }),
        tailwindcss(), // Nativní integrace Tailwind CSS v4 engine
    ],
    server: {
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

Proč je tato konfigurace unikátní:

1. refresh: true: Kdykoliv upravíte Blade šablonu nebo PHP controller, Vite automaticky obnoví stránku v prohlížeči.
2. tailwindcss(): Ve verzi 4 již nepotřebujeme starý PostCSS ani konfigurační soubor tailwind.config.js! Veškerá konfigurace probíhá přímo v CSS.

2. Anatomie resources/css/app.css v Tailwind CSS v4

V Tailwind CSS v4 došlo k radikálnímu zjednodušení. Staré direktivy @tailwind base; @tailwind components; @tailwind utilities; byly nahrazeny jediným moderním importem:

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

Klíčové direktivy Tailwind v4:

• @import 'tailwindcss'; — Zaveze kompletní moderní jádro Tailwindu.
• @source — Určuje soubory, které má kompilátor skenovat pro výskyt CSS tříd (JIT kompilace).
• @theme — Umožňuje definovat a přepsat CSS proměnné designového systému přímo v CSS.

3. Direktiva @vite v produkci vs. lokálním vývoji

V šabloně layouts/app.blade.php máme řádek:

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

Jak tato direktiva funguje pod kapotou?

• Při lokálním vývoji (npm run dev): Direktiva detekuje běžící Vite dev server (pomocí souboru public/hot) a vloží tagy odkazující na http://localhost:5173/resources/css/app.css s podporou bleskového Hot Module Replacement.
• V produkci po npm run build: Direktiva načte soubor public/build/manifest.json. Ten obsahuje přesné mapování původních souborů na jejich verzované a minifikované produkční otisky (např. app-D8sF2a9.css). Díky tomu mají uživatelé vždy aktuální verzi bez problémů s mezipamětí prohlížeče!