Install Shadcn UI on Laravel Inertia

Problem

Official documentation of shadcn/ui only covers how to install shadcn-ui on Laravel using Breeze.

Solution

Install Laravel Inertia following their official documentation
Install tailwind (v3.4.3 as of this writing) by following official documentation

Modify tailwind.config.js to search content in the directory of Inertia components and shadcn components (depending on where you put the components)

//...
  content: [
      "./resources/**/*.{html,js,jsx}", // inertia
      "./resources/**/*.blade.php", // blade
      "./resources/**/*.js", // just in case
      "./components/**/*.{html,js,jsx}", // shadcn components
  ],
//...

Install shadcn/ui using this command

npx shadcn-ui@latest init

Follow the step in the official documentation to change the tailwind.config.js so it support shadcn-ui styling
Update the tailwind.css source css (depending on where you configure yours), add base styling / theme for shadcn-ui

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        /* --foreground: 60 3% 38%; */
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;
        --primary: 221.2 83.2% 53.3%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 221.2 83.2% 53.3%;
        --radius: 0.5rem;
    }
 
    .dark {
        /* --background: 222.2 84% 4.9%; */
        --background: 223, 70%, 4%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 217.2 91.2% 59.8%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 224.3 76.3% 48%;
    }
}

Index Tailwind Conflict with Boostrap