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

The web development ecosystem is evolving rapidly. With the release of AdonisJS v7 and the stable launch of Tailwind CSS v4, we now have a high-performance, type-safe path to building full-stack applications that feel like magic.

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

Why This Stack?

• AdonisJS v7: The robust, "backend-first" Node.js framework.


• Inertia.js: Build single-page apps without the complexity of a separate API.


• Tailwind v4: A lightning-fast, Rust-powered engine with zero-config CSS.


• shadcn/ui: High-quality, accessible components that you own.

1. Install Tailwind CSS v4 (Stable)

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

In your project root, run:

bash

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. This replaces the old PostCSS workflow.



typescript

// vite.config.ts

import { defineConfig } from 'vite'

import adonisjs from '@adonisjs/vite/client'

import react from '@vitejs/plugin-react'

import tailwindcss from '@tailwindcss/vite' // [!code ++]

import path from 'node:path'



export default defineConfig({

  plugins: [

    tailwindcss(), // [!code ++]

    react(),

    adonisjs({ 

      entrypoints: ['resources/js/app.tsx', 'resources/css/app.css'] 

    }),

  ],

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './resources/js'),

    },

  },

})