DEV Community

Ahsan Abrar
Ahsan Abrar

Posted on

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

#adonisjs #react #tailwindcss #webdev

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
Enter fullscreen mode Exit fullscreen mode

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/**'],
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)