Setup tailwind css, removed some unnecessary stuff

pac-man-board-game/ClientApp/package.json

@@ -3,16 +3,13 @@
   "version": "0.1-Testing",
   "private": true,
   "dependencies": {
-    "http-proxy-middleware": "^2.0.6",
     "jquery": "^3.7.0",
     "merge": "^2.1.1",
     "oidc-client": "^1.11.5",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-bootstrap": "^0.26.2",
-    "react-router-dom": "^6.11.1",
-    "react-scripts": "^5.0.1",
+    "react-router-dom": "^6.9.0",
     "rimraf": "^3.0.2",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.5.4",
@@ -32,7 +29,9 @@
     "@types/jest": "^29.5.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react": "^4.0.0",
     "ajv": "^8.12.0",
+    "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "eslint": "^8.40.0",
     "eslint-config-react-app": "^7.0.1",
@@ -41,10 +40,12 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "nan": "^2.17.0",
-    "typescript": "^4.9.5"
-  },
-  "overrides": {
-    "autoprefixer": "10.4.5"
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.6",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "resolutions": {
     "css-what": "^5.0.1",
@@ -56,7 +57,6 @@
     "build": "vite build",
     "serve": "vite preview",
     "test": "cross-env CI=true react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
     "lint": "eslint ./src/"
   },
   "eslintConfig": {

pac-man-board-game/ClientApp/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

pac-man-board-game/ClientApp/src/App.test.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { MemoryRouter } from 'react-router-dom';
-import {App} from './App';
+import React from "react";
+import {createRoot} from "react-dom/client";
+import {MemoryRouter} from "react-router-dom";
+import {App} from "./App";
 
-it('renders without crashing', async () => {
-  const div = document.createElement('div');
+it("renders without crashing", async () => {
+  const div = document.createElement("div");
   const root = createRoot(div);
   root.render(
     <MemoryRouter>
-      <App />
+      <App/>
     </MemoryRouter>);
   await new Promise(resolve => setTimeout(resolve, 1000));
 });

pac-man-board-game/ClientApp/src/App.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {Route, Routes} from "react-router-dom";
 import {Layout} from "./components/Layout";
 import AppRoutes from "./AppRoutes";
-import "./custom.css";
+import "./index.css";
 
 export const App = () => (
   <Layout>

pac-man-board-game/ClientApp/src/AppRoutes.tsx

@@ -1,20 +1,20 @@
 import React from "react";
-import { Counter } from "./components/Counter";
-import { FetchData } from "./components/FetchData";
-import { Home } from "./components/Home";
+import {Counter} from "./components/Counter";
+import {FetchData} from "./components/FetchData";
+import {Home} from "./components/Home";
 
 const AppRoutes = [
   {
     index: true,
-    element: <Home />
+    element: <Home/>
   },
   {
-    path: '/counter',
-    element: <Counter />
+    path: "/counter",
+    element: <Counter/>
   },
   {
-    path: '/fetch-data',
-    element: <FetchData />
+    path: "/fetch-data",
+    element: <FetchData/>
   }
 ];
 

pac-man-board-game/ClientApp/src/components/Home.tsx

@@ -3,8 +3,8 @@ import React from "react";
 export const Home = () =>
   (
     <div>
-      <h1>Hello, world!</h1>
-      <p>Welcome to your new single-page application, built with:</p>
+      <h1 className={"debug w-fit"}>Hello, world!</h1>
+      <p className={"text-cyan-900"}>Welcome to your new single-page application, built with:</p>
       <ul>
         <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a
           href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side

pac-man-board-game/ClientApp/src/components/Layout.tsx

@@ -1,7 +1,7 @@
-import React, {JSX} from "react";
+import React from "react";
 import {NavMenu} from "./NavMenu";
 
-export const Layout = ({children}: { children: JSX.Element }) => (
+export const Layout = ({children}: { children: React.ReactNode }) => (
     <div>
         <NavMenu/>
         <main>

pac-man-board-game/ClientApp/src/components/NavMenu.css

@@ -1,19 +0,0 @@
-a.navbar-brand {
-    white-space: normal;
-    text-align: center;
-    word-break: break-all;
-}
-
-html {
-    font-size: 14px;
-}
-
-@media (min-width: 768px) {
-    html {
-        font-size: 16px;
-    }
-}
-
-.box-shadow {
-    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}

pac-man-board-game/ClientApp/src/components/NavMenu.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {Link} from "react-router-dom";
-import "./NavMenu.css";
 
 export const NavMenu = () => {
 

pac-man-board-game/ClientApp/src/custom.css

@@ -1,18 +0,0 @@
-/* Provide sufficient contrast against white background */
-a {
-  color: #0366d6;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-code {
-  color: #E01A76;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}

pac-man-board-game/ClientApp/src/index.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.debug {
+    @apply border border-red-500;
+    @apply after:content-['debug'] after:absolute;
+}
+
+h1 {
+    @apply text-4xl;
+}

pac-man-board-game/ClientApp/tailwind.config.js

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

pac-man-board-game/ClientApp/tsconfig.json

@@ -12,7 +12,8 @@
     "target": "ESNext",
     "module": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "types": ["vite/client", "vite-plugin-svgr/client", "jest"],
+    "moduleResolution": "node",
   },
   "include": [
     "src"

pac-man-board-game/ClientApp/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // @ts-ignore
 import fs from "fs";