Tailwind setup

packages/webui/package.json

@@ -22,9 +22,12 @@
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
     "vite": "^5.3.1"
   }
 }

packages/webui/postcss.config.js

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

packages/webui/src/App.tsx

@@ -1,23 +1,10 @@
-import { useState } from "react"
+import "./index.css"
+import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
 
 
 export function App() {
-  const [count, setCount] = useState(0)
+    return (
-
+        <TRPCClientProvider>
-  return (
+        </TRPCClientProvider>
-    <>
+    )
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
 }

packages/webui/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/webui/src/trpc/TRPCClientProvider.tsx

@@ -5,7 +5,7 @@ import { trpc } from "./trpc"
 
 
 export interface TRPCClientProviderProps {
-    children: ReactNode
+    children?: ReactNode
 }
 
 

packages/webui/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import("tailwindcss").Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+
+    theme: {
+        extend: {},
+    },
+
+    plugins: [],
+}