How to Setup Tailwind CSS v4 & shadcn/ui in AdonisJS v7 (React + Inertia)

Ahsan Abrar — Thu, 12 Mar 2026 13:03:55 +0000

In this guide, I'll show you how to combine these powerhouses with Inertia.js, React, and the latest shadcn/ui to create a world-class development environment.

Why This Stack?

AdonisJS v7: A robust, opinionated backend that handles Auth, Databases (Lucid ORM), and Validation out of the box.
Inertia.js: The "secret sauce" that lets you build SPAs using classic server-side routing.
Tailwind v4: A lightning-fast, Rust-powered engine that moves configuration from JS files directly into your CSS.
shadcn/ui: Beautiful, accessible components that you own and can fully customize.

Step 1: Install Tailwind CSS v4 (Stable)

Tailwind v4 is now the stable standard. It integrates directly with Vite, so we no longer need postcss.config.js or tailwind.config.js.

In your AdonisJS project root, install the core engine and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Step 2: Configure the Vite Plugin

AdonisJS v7 uses Vite by default. We need to register the Tailwind v4 plugin in vite.config.ts and wire it up to the Inertia frontend that lives in the inertia directory.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import adonisjs from '@adonisjs/vite/client'
import inertia from '@adonisjs/inertia/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    react(),
    inertia({ ssr: { enabled: false, entrypoint: 'inertia/ssr.tsx' } }),
    adonisjs({
      entrypoints: ['inertia/app.tsx'],
      reload: ['resources/views/**/*.edge'],
    }),
  ],
  resolve: {
    alias: {
      '@': `${import.meta.dirname}/inertia`,
      '~/': `${import.meta.dirname}/inertia/`,
    },
  },
  server: {
    watch: {
      ignored: ['**/storage/**', '**/tmp/**'],
    },
  },
})

Step 3: Prepare the CSS Entrypoint

In v4, your CSS file is the "source of truth." Open inertia/css/app.css and add the following:

@import 'tailwindcss';

/* Configuration happens here instead of a JS file */
@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui;
}

Step 4: Initialize the Latest shadcn/ui

Now that the styling engine is ready, we can bring in shadcn. The latest CLI automatically detects Tailwind v4 and your TypeScript aliases.

Run the init command (for a Vite-powered Adonis/Inertia frontend):

npx shadcn@latest init -t vite

Recommended CLI Responses for AdonisJS + Inertia:

Prompt	Answer
Component library	Radix
Preset	Nova
Global CSS	`inertia/css/app.css`
Import alias for components	`@/components`
Import alias for utils	`@/lib/utils`

Note: Since your React files live in the inertia directory, shadcn will generate components into inertia (e.g. inertia/components/ui) and inject its design tokens (colors, border-radius) directly into inertia/css/app.css under the @theme or @layer base blocks.

Step 5: Verify Path Aliases

To ensure your React components can find the UI library, your root tsconfig.json must match the aliases defined in Vite and point to the inertia directory:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./inertia/*"]
    }
  }
}

Step 6: Create Your First Component

Let's add a button and use it in an Inertia page.

1. Add the component:

npx shadcn@latest add button

2. Use it in a Page (inertia/pages/home.tsx):

import { Button } from '@/components/ui/button'
import { Head } from '@inertiajs/react'

export default function Home() {
  return (
    <>
      <Head title="Adonis + shadcn" />
      <div className="flex flex-col h-screen items-center justify-center gap-4 bg-background text-foreground">
        <h1 className="text-3xl font-bold">The 2026 Stack</h1>
        <p className="text-muted-foreground text-lg">AdonisJS v7 + React + Tailwind v4</p>
        <Button size="lg">Ready to Build</Button>
      </div>
    </>
  )
}

Troubleshooting & Tips

Order Matters: Always install Tailwind v4 before running shadcn init. The CLI needs to see Tailwind in your package.json to configure itself correctly.
No Config? If you're looking for tailwind.config.js, remember: in v4, you don't need it! Use the @theme block in app.css to add custom colors or spacing.
Icon Library: shadcn uses lucide-react by default. If you encounter an error, run npm install lucide-react.

Conclusion

You now have a powerhouse setup. AdonisJS handles the heavy lifting on the server, while React, Tailwind v4, and shadcn provide a professional, lightning-fast UI layer.

By removing the friction of complex configuration files, this stack lets you focus on what actually matters: building your product.

Forem: Ahsan Abrar