Vite Asset Bundling and Tailwind CSS — Laravel 12 Masterclass: Build Modern PHP Applications

Vite Asset Bundling and Tailwind CSS

16 min read Lesson 16 / 28

Frontend Asset Management with Vite

Laravel uses Vite for lightning-fast asset bundling with Hot Module Replacement during development and optimized builds for production.

Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Including Assets in Blade

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

Development vs Production

npm run dev    # Starts Vite dev server with HMR
npm run build  # Creates optimized production build

Tailwind CSS Setup

Tailwind CSS is the default styling framework in Laravel:

/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-emerald-500 text-white font-semibold
               rounded-lg hover:bg-emerald-600 transition-colors;
    }
}

// tailwind.config.js
export default {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
    ],
    theme: {
        extend: {
            colors: {
                'brand-primary': '#38D39F',
            },
            fontFamily: {
                sans: ['Instrument Sans', 'sans-serif'],
            },
        },
    },
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/forms'),
    ],
};

Importing JavaScript Libraries

// resources/js/app.js
import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

Critical Production Note: Always run npm run build before deploying, and ensure public/hot is removed in production to prevent Vite dev server references.