Convert example app to use Tailwind CSS

- Install Tailwind CSS v4.1.16 with PostCSS and Autoprefixer
- Replace all custom CSS with Tailwind utility classes
- Add dark mode support throughout the application
- Remove unused CSS files (App.css, SettingsModal.css, ConversationManager.css, ServerStatus.css)
- Update components with modern responsive design using Tailwind
- Maintain all existing functionality while improving visual consistency

Components updated:
- App.tsx: Main layout with responsive grid and dark mode
- SettingsModal.tsx: Modal overlay with form styling and error states
- ConversationManager.tsx: Two-column layout with improved event display
- ServerStatus.tsx: Status indicators with color-coded states
- index.css: Converted to use Tailwind base styles

Co-authored-by: openhands <[email protected]>

Author: openhands-agent

example/package-lock.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openhands/agent-server-typescript-client": "file:../",
+    "@tailwindcss/postcss": "^4.1.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -21,10 +22,13 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.16",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
-}
+}

example/package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

example/postcss.config.js

@@ -1,5 +1,3 @@
-import './App.css'
-
 // Import settings components
 import { SettingsModal } from './components/SettingsModal'
 import { ConversationManager } from './components/ConversationManager'
@@ -10,18 +8,21 @@ function App() {
   const { settings, updateSettings, isModalOpen, openModal, closeModal, isFirstVisit } = useSettings()
 
   return (
-    <div className="App">
-      <div>
-        <div className="app-header">
-          <h1>OpenHands Conversation Manager</h1>
-          <button className="settings-button" onClick={openModal}>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+      <div className="max-w-7xl mx-auto p-8 text-center">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white m-0">OpenHands Conversation Manager</h1>
+          <button 
+            className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-md font-medium transition-colors duration-200"
+            onClick={openModal}
+          >
             ⚙️ Settings
           </button>
         </div>
 
         {isFirstVisit && (
-          <div className="welcome-message">
-            <p>👋 Welcome! Please configure your settings to get started.</p>
+          <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-md p-4 mb-4 text-center">
+            <p className="text-blue-700 dark:text-blue-300 font-medium m-0">👋 Welcome! Please configure your settings to get started.</p>
           </div>
         )}