Laravel + Inertia + React

.postcssrc.json

{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

.prettierignore

vendor
storage
node_modules
public/build
public/vendor

.prettierrc.json

{
  "singleQuote": true,
  "printWidth": 151,
  "plugins": [
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss"
  ]
}

app.tsx

// resources/js/app.tsx
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import '../css/app.css';
import './bootstrap';

createInertiaApp({
  title: (title) => `${title} - ${import.meta.env.VITE_APP_NAME}`,
  page: window.inertiaInitialPageData,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
  setup: ({ el, App, props }) => {
    createRoot(el).render(
      <WhateverProviders>
        <App {...props} />
      </WhateverProviders>,
    );
  },
});

global.d.ts

// resources/js/types/global.d.ts
import { Page } from '@inertiajs/core';
import '@inertiajs/core';
import { AxiosInstance } from 'axios';
import type { Echo } from 'laravel-echo';
import { Config as ZiggyConfig, route as ziggyRoute } from 'ziggy-js';

declare global {
  interface Window {
    axios: AxiosInstance;
    inertiaInitialPageData: Page;
    Pusher: Pusher;
    Echo: Echo;
  }

  const route: typeof ziggyRoute;
  const Ziggy: ZiggyConfig;
}

declare module '@inertiajs/core' {
  interface PageProps {
    is_production: boolean;
    flash?: {
      key: string;
      message: string;
      type: 'success' | 'error' | 'info' | 'warning';
    }[];
  }
}

package.json

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "type": "module",
  "devDependencies": {
    "@inertiajs/react": "^1.2.0",
    "@tailwindcss/forms": "^0.5.9",
    "@types/node": "^22.9.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "autoprefixer": "^10.4.20",
    "laravel-vite-plugin": "^1.0.6",
    "postcss": "^8.4.49",
    "prettier": "^3.3.3",
    "prettier-plugin-organize-imports": "^4.1.0",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwind-merge": "^2.5.4",
    "tailwindcss": "^3.4.15",
    "typescript": "^5.6.3",
    "vite": "^5.4.11",
    "ziggy-js": "^2.4.0"
  }
}

tailwind.config.ts

import forms from '@tailwindcss/forms';
import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

// noinspection JSUnusedGlobalSymbols
export default {
  content: [
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/js/**/*.{jsx,tsx}',
  ],
  //... other tailwind stuff
  plugins: [
    forms,
  ],
} satisfies Config;

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "isolatedModules": true,
    "target": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "noEmit": true
  },
  "include": [
    "resources/js/**/*.ts",
    "resources/js/**/*.tsx",
    "resources/js/**/*.d.ts"
  ]
}

tsconfig.node.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "module": "ESNext",
    /* Bundler mode */
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "incremental": true,
    /* Linting */
    "strictNullChecks": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    /* Misc */
    "noErrorTruncation": true,
    "composite": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types",
      "./resources/js/types"
    ]
  },
  "include": [
    "vite.config.ts",
    "tailwind.config.ts",
    "resources/js/types/*.d.ts"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

vite.config.ts

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

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