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 vite.config.ts:

typescriptvite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
});

Step 3: Import Tailwind in Your CSS

Create or update your main CSS file (src/web/styles.css):

@import 'tailwindcss';

Then import it in your entry point (src/web/frontend.tsx):

import './styles.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