Add Tailwind

packages/web/components/create/ChallengeTypeScreen.js

@@ -16,7 +16,7 @@ const placeholderChallengeType = {
 
 const ChallengeTypeScreen = (props) => {
   return (
-    <div>
+    <div className="bg-white/10 p-10 rounded w-full max-w-4xl backdrop-blur-sm">
       <Formik
         initialValues={{
           name: '',
@@ -32,7 +32,7 @@ const ChallengeTypeScreen = (props) => {
           const price = utils.parseEther(prtclePrice).toString();
           const quantity = utils.parseEther(maxQuantity).toString();
           const total = utils.parseEther(totalQuantity).toString();
-          
+
           await props.addChallengeTypes([
             {
               name,
@@ -47,19 +47,28 @@ const ChallengeTypeScreen = (props) => {
           actions.setSubmitting(false);
         }}
       >
-        <FormFrame>
-          <Field id="name" name="name" placeholder="Challenge Title" />
+        <FormFrame className="flex flex-col gap-8">
+          <Field
+            className="py-4 px-8 text-gray-800 rounded"
+            id="name"
+            name="name"
+            placeholder="Challenge Title"
+          />
           <Field
             id="description"
             name="description"
             placeholder="Enter Description"
+            className="py-4 px-8 text-gray-800 rounded"
           >
             {({ field, form, meta }) => {
               return (
                 <TextArea
                   name="description"
                   value={field.value}
                   onChange={field.onChange}
+                  placeholder="Description"
+                  style={{ resize: 'none' }}
+                  className="py-4 px-8 text-gray-800 rounded min-h-xl"
                 />
               );
             }}
@@ -68,16 +77,19 @@ const ChallengeTypeScreen = (props) => {
             id="prtclePrice"
             name="prtclePrice"
             placeholder="Starting Price (in Particle)"
+            className="py-4 px-8 text-gray-800 rounded"
           />
           <Field
             id="maxQuantity"
             name="maxQuantity"
             placeholder="Max quantity"
+            className="py-4 px-8 text-gray-800 rounded"
           />
           <Field
             id="totalQuantity"
             name="totalQuantity"
             placeholder="Total Quantity"
+            className="py-4 px-8 text-gray-800 rounded"
           />
           <button type="submit">Next</button>
         </FormFrame>
@@ -95,5 +107,4 @@ const FormFrame = styled(Form)`
   flex-direction: column;
   justify-content: space-around;
   align-items: space-around;
-  height: 200px;
 `;

packages/web/package.json

@@ -36,10 +36,13 @@
     "web3modal": "^1.9.4"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.2",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.3",
     "key-did-provider-ed25519": "^1.1.0",
     "key-did-resolver": "^1.4.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.15",
     "uint8arrays": "^3.0.0"
   }
 }

packages/web/pages/mint.js

@@ -125,14 +125,14 @@ const Main = styled.main`
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
   position: relative;
 `;
 
 const FormFrame = styled.form`
   display: flex;
   flex-direction: column;
-  height: 150px;
+  /* height: 150px; */
   justify-content: space-around;
 `;
 

packages/web/postcss.config.js

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

packages/web/styles/globals.css

@@ -1,33 +1,37 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Open+Sans&display=swap');
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 *,
 *::after,
 *::before {
-	margin: 0;
-	padding: 0;
-	box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
 }
 
 html {
-	font-size: 62.5%;
+  font-size: 62.5%;
 }
 
 body {
-	background-color: #1a181a;
-	color: #f5f3f5;
-	font-family: 'Open Sans', sans-serif;
-	box-sizing: border-box;
-	font-size: 1.7rem;
-	line-height: 1.5;
+  background-color: #1a181a;
+  color: #f5f3f5;
+  font-family: 'Open Sans', sans-serif;
+  box-sizing: border-box;
+  font-size: 1.7rem;
+  line-height: 1.5;
 }
 
 a {
-	color: inherit;
-	text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 }
 
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 h1,
@@ -36,7 +40,7 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: 'Montserrat', sans-serif;
-	line-height: 1.2;
-	color: white;
+  font-family: 'Montserrat', sans-serif;
+  line-height: 1.2;
+  color: white;
 }

packages/web/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};