Laravel

New project

1. Create a Laravel app with the React/Inertia starter kit

   Laravel 11+ ships official starter kits. Use the React variant which includes Inertia.js, TypeScript, and Tailwind:

   laravel new my-app --starter-kit=react
   cd my-app

2. Upgrade to Tailwind v4

   The Laravel React starter kit ships with Tailwind v3. Upgrade to v4:

   npm install tailwindcss@latest @tailwindcss/vite@latest
   npm uninstall @tailwindcss/forms autoprefixer postcss

   Update vite.config.ts to use the Vite plugin instead of PostCSS:

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

   Replace resources/css/app.css content with:

   @import "tailwindcss";

3. Configure path aliases

   The starter kit sets up @/ aliased to resources/js/. Verify in tsconfig.json:

   {
     "compilerOptions": {
       "paths": { "@/*": ["./resources/js/*"] }
     }
   }

4. Initialise shadcn

   npx shadcn@latest init -y -b base -p nova

   When prompted for the components path, use resources/js/components.

5. Add the Layout registry and install components

   // components.json
   {
     "registries": {
       "@layout": "https://ui.layout.design/r/{name}.json"
     }
   }

   npx shadcn add @layout/theme-layout
   npx shadcn add @layout/button