feat: integrate PrimeReact components and update styling with Tailwin…

…d CSS

package.json

@@ -18,6 +18,7 @@
     },
     "dependencies": {
         "@tailwindcss/vite": "^4.0.0",
+        "primereact": "^10.9.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "tailwindcss": "^4.0.0",

resources/css/app.css

@@ -1 +1,13 @@
-@import "tailwindcss";
+@layer tailwind-base, primereact, tailwind-utilities;
+
+/* IMPORTANT: In "styled" mode you must add the PrimeReact Theme here. Do NOT include in "unstyled" mode */
+@import 'primereact/resources/themes/lara-light-blue/theme.css' layer(primereact);
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}

resources/ts/App.tsx

@@ -1,7 +1,14 @@
 import React from "react";
+import { Button } from 'primereact/button';
+import { useEffect } from "react";
 
 const App: React.FC = () => {
-    return "Hello, World from React!";
+    return (
+        <div className="p-4">
+            <h1 className="text-2xl font-bold">Hello, World from React and Tailwind CSS!</h1>
+            <Button label="Click Me" onClick={() => alert('Hello, World!')} />
+        </div>
+    );
 };
 
 export default App;

resources/ts/main.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { PrimeReactProvider } from 'primereact/api';
 
 const rootElement = document.getElementById("app");
 if (rootElement) {
     const root = ReactDOM.createRoot(rootElement); // This is correct for React 18+
     root.render(
         <React.StrictMode>
-            <App />
+            <PrimeReactProvider>
+                <App />
+            </PrimeReactProvider>
         </React.StrictMode>
     );
 }