SinchaiApp

Log in

Configuration Guide — Fresh Laravel to Inertia + React + Tailwind

Starting from laravel new, here is every command and file change needed to end up with this stack.

  1. 1. Create a fresh Laravel app

    Laravel is the backend — routing, database, business logic.

    composer create-project laravel/laravel example-app
cd example-app

  2. 2. Install Inertia's Laravel (server-side) adapter

    Lets controllers return React pages directly, no separate JSON API needed. The inertia:middleware command generates app/Http/Middleware/HandleInertiaRequests.php. 

    composer require inertiajs/inertia-laravel
php artisan inertia:middleware

  3. 3. Register the middleware

    In bootstrap/app.php, append it to the web middleware group: 

    ->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        App\Http\Middleware\HandleInertiaRequests::class,
    ]);
})

  4. 4. Install the frontend packages

    React (UI), Inertia's React adapter + Vite plugin, and Tailwind v4:

    npm install @inertiajs/react react react-dom
npm install -D @inertiajs/vite @vitejs/plugin-react
npm install -D tailwindcss @tailwindcss/vite

  5. 5. Wire up the plugins in vite.config.js

    import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import inertia from '@inertiajs/vite';

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

  6. 6. Enable Tailwind in your CSS

    Tailwind v4 needs no tailwind.config.js — just import it in resources/css/app.css: 

    @import 'tailwindcss';

  7. 7. Replace the JS entry point

    Delete Laravel's default resources/js/app.js and create resources/js/app.jsx instead: 

    import { createInertiaApp } from '@inertiajs/react';
import { createRoot } from 'react-dom/client';

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true });
        return pages[`./Pages/${name}.jsx`];
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />);
    },
});

  8. 8. Create the Inertia root Blade view

    resources/views/app.blade.php — this is the one HTML page React mounts into: 

    <html>
    <head>
        @vite('resources/js/app.jsx')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

  9. 9. Return Inertia pages from routes

    Instead of view(...), controllers/routes return Inertia::render(...), and matching .jsx files live under resources/js/Pages/: 

    Route::get('/login', function () {
    return Inertia::render('Auth/Login');
});

  10. 10. Run it

    composer run dev
# or separately:
php artisan serve
npm run dev