Tailwind CSS Setup — Agentuity Documentation

Tailwind CSS Setup

Add Tailwind CSS styling to your Agentuity frontend

Add Tailwind CSS v4 to your Agentuity project using the official Tailwind Vite plugin.

Prerequisites

  • An Agentuity project with a src/web/ directory
  • Bun runtime (included with Agentuity CLI)

Step 1: Install Dependencies

bun add -D tailwindcss @tailwindcss/vite

Step 2: Create Build Configuration

Add the Tailwind plugin to your existing vite.config.ts. Keep the React plugin and any Agentuity build settings already in the file:

typescriptvite.config.ts
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import { join } from 'node:path';
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  root: '.',
  publicDir: 'src/web/public',
  build: {
    rollupOptions: {
      input: join(import.meta.dirname, 'src/web/index.html'),
    },
  },
});

Step 3: Import Tailwind in Your CSS

Create or update the CSS file imported by your frontend, for example src/web/App.css:

@import 'tailwindcss';

Then import it from your frontend entry or root component:

typescriptsrc/web/App.tsx
import './App.css';

Step 4: Use Tailwind Classes

Add utility classes to your React components:

// src/web/App.tsx
export function App() {
  return (
    <div className="min-h-screen bg-zinc-900 flex items-center justify-center">
      <div className="bg-zinc-800 rounded-lg p-8 max-w-md">
        <h1 className="text-2xl font-bold text-white mb-4">
          Hello, Tailwind!
        </h1>
        <p className="text-zinc-400">
          Your Agentuity frontend is styled with Tailwind CSS.
        </p>
      </div>
    </div>
  );
}

Step 5: Verify

Start the dev server and check that styles are applied:

bun run dev

Open http://localhost:3500 in your browser. You should see your styled component.

Key Points

  • Tailwind applies to frontend builds only (via Vite)
  • The plugin scans your components and generates only the CSS you use
  • No tailwind.config.ts needed for basic usage (Tailwind v4 works out of the box)
  • Style changes reflect immediately in dev mode via Vite HMR

Next Steps