installing and configuring tailwind

apps/web/package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@glossa/shared": "workspace:*",
+    "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-router": "^1.168.1",
     "@tanstack/react-router-devtools": "^1.166.10",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.2"
   },
   "devDependencies": {
     "@tanstack/router-plugin": "^1.167.2",

apps/web/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

apps/web/src/main.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+import "./index.css";
 
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";

apps/web/src/routes/index.tsx

@@ -4,7 +4,7 @@ export const Route = createFileRoute("/")({ component: Index });
 
 function Index() {
   return (
-    <div className="p-2">
+    <div className="p-2 text-3xl text-amber-400">
       <h3>Welcome Home!</h3>
     </div>
   );

apps/web/vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     tanstackRouter({ target: "react", autoCodeSplitting: true }),
     react(),
+    tailwindcss(),
   ],
 });