install tailwind, add it to build/dev workflows

apps/passport-client/.gitignore

@@ -1,8 +1,8 @@
-
 # Esbuild generated output
 public/js
 .env
 public/service-worker.js
 public/index.html
 public/bundle-stats.html
 public/scandit-engine
+public/built.css

apps/passport-client/components/screens/LoginScreens/LoginScreen.tsx

@@ -157,15 +157,14 @@ export function LoginScreen(): JSX.Element {
         </>
       ) : (
         <>
-          <TextCenter>
+          <TextCenter className="bg-red-500 border-4 border-black">
             <H1>ZUPASS</H1>
             <Spacer h={24} />
             This is an experimental personal cryptography manager, powered by
-            Zero-Knowledge.
+            Zero-Knowledge. ASDF
           </TextCenter>
         </>
       )}
-
       {!state.loggingOut && (
         <>
           <Spacer h={24} />
@@ -176,7 +175,7 @@ export function LoginScreen(): JSX.Element {
                 autoCorrect="off"
                 type="text"
                 autoFocus
-                placeholder="email address"
+                placeholder="email addressssssss"
                 value={email}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setEmail(e.target.value)

apps/passport-client/package.json

@@ -4,8 +4,10 @@
   "license": "GPL-3.0-or-later",
   "private": true,
   "scripts": {
-    "dev": "ts-node build.ts dev",
-    "build": "tsc --noEmit && ts-node build.ts build",
+    "dev": "concurrently \"ts-node build.ts dev\" \"yarn watch:css\"",
+    "build": "tsc --noEmit && ts-node build.ts build && yarn build:css",
+    "build:css": "tailwindcss build -i src/style.css -o public/built.css",
+    "watch:css": "tailwindcss -w build -i src/style.css -o public/built.css",
     "start": "exit 0",
     "lint": "tsc --noEmit && eslint \"**/*.ts{,x}\"",
     "test": "ts-mocha --type-check --config ../../.mocharc.js --exit 'test/**/*.spec.ts'",
@@ -42,10 +44,10 @@
     "@pcd/pcd-collection": "0.11.1",
     "@pcd/pcd-types": "0.11.1",
     "@pcd/pod": "0.1.1",
-    "@pcd/pod-ticket-pcd": "0.1.1",
-    "@pcd/pod-ticket-pcd-ui": "0.1.1",
     "@pcd/pod-pcd": "0.1.1",
     "@pcd/pod-pcd-ui": "0.1.1",
+    "@pcd/pod-ticket-pcd": "0.1.1",
+    "@pcd/pod-ticket-pcd-ui": "0.1.1",
     "@pcd/rsa-image-pcd": "0.5.1",
     "@pcd/rsa-image-pcd-ui": "0.2.1",
     "@pcd/rsa-pcd": "0.6.1",
@@ -105,6 +107,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@pcd/eslint-config-custom": "0.11.1",
+    "@pcd/proto-pod-gpc-artifacts": "0.4.0",
     "@types/chai": "^4.3.11",
     "@types/email-validator": "^1.0.6",
     "@types/express": "^4.17.17",
@@ -116,14 +119,16 @@
     "@types/zxcvbn": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@pcd/proto-pod-gpc-artifacts": "0.4.0",
+    "autoprefixer": "^10.4.19",
     "esbuild": "^0.17.10",
+    "esbuild-style-plugin": "^1.6.3",
     "esbuild-visualizer": "^0.4.1",
     "eslint": "8.57.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "express": "^4.18.2",
     "mocha": "^10.2.0",
+    "tailwindcss": "^3.4.6",
     "ts-mocha": "^10.0.0",
     "ts-node": "^10.9.2",
     "tsparticles-plugin-emitters": "^2.12.0",

apps/passport-client/public/index.hbs

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="stylesheet" href="/global-zupass.css" />
+    <link rel="stylesheet" href="/built.css" />
     <link
       rel="preload"
       href="/fonts/IBMPlexSans-Regular.woff"

apps/passport-client/src/style.css

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

apps/passport-client/tailwind.config.js

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