set up tailwind

package.json

@@ -31,6 +31,9 @@
 	"devDependencies": {
 		"@types/react": "^17.0.35",
 		"@types/react-dom": "^17.0.11",
+		"autoprefixer": "^10.4.0",
+		"postcss": "^8.3.11",
+		"tailwindcss": "^2.2.19",
 		"typescript": "^4.5.2"
 	}
 }

pages/_app.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import type { AppProps } from "next/app"
 import Head from "next/head"
 
+import 'tailwindcss/tailwind.css'
 import "../style.css"
 
 export default function App(props: AppProps) {

pages/index.tsx

@@ -35,8 +35,9 @@ export default function Index(props: IndexPageProps) {
 	const [message, setMessage] = useState("")
 
 	return (
-		<main>
-			<h1>zk-group-sigs-server</h1>
+		<div className="max-w-lg m-auto">
+			<h1 className="uppercase font-bold pt-16 pb-6">zk chat</h1>
+			<div className="border border-gray-300 rounded-xl p-6">
 			<fieldset>
 				<legend>identify yourself</legend>
 				<label>
@@ -78,19 +79,21 @@ export default function Index(props: IndexPageProps) {
 				</label>
 			</fieldset>
 			<fieldset>
-				<legend>sign a message</legend>
-				<span>message</span>
+				<legend>message</legend>
 				<br />
 				<textarea
+					className="block w-full"
 					value={message}
 					onChange={(event) => setMessage(event.target.value)}
 				/>
 				<input
+					className="bg-pink text-white rounded-xl px-4 py-2 mt-6"
 					type="button"
 					onClick={() => prove({ secret, hash1, hash2, hash3, msg: message })}
-					value="sign"
+					value="Send your first message"
 				/>
 			</fieldset>
-		</main>
+			</div>
+		</div>
 	)
 }

postcss.config.js

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

style.css

@@ -1,3 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+    background: #f5f5f5;
+}
 main {
 	max-width: 720px;
 	margin: auto;

tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        pink: '#d562f2'
+      }
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}