Extract common form styles to components

pages/login.tsx

@@ -12,38 +12,38 @@ const Login: NextPage = () => {
   return (
     <Layout>
       <form
-        className="w-full max-w-screen-xs mx-auto flex flex-col xs:grid xs:grid-cols-form xs:items-center gap-4"
+        className="form"
         onSubmit={submitHandler}
       >
         <div className="xs:contents">
-          <label htmlFor="email" className="font-bold flex-1 xs:text-right">
+          <label htmlFor="email" className="form-label">
             Email
           </label>
           <input
             type="email"
             name="email"
             id="email"
-            className="bg-prisma-50 w-full rounded py-2 px-3 text-sm"
+            className="form-input"
             placeholder="monkey@gmail.com"
             required
           />
         </div>
         <div className="xs:contents">
-          <label htmlFor="password" className="font-bold flex-1 xs:text-right">
+          <label htmlFor="password" className="form-label">
             Password
           </label>
           <input
             type="password"
             name="password"
             id="password"
-            className="bg-prisma-50 w-full rounded py-2 px-3 text-sm"
+            className="form-input"
             placeholder="••••••"
             required
           />
         </div>
         <button
           type="submit"
-          className="col-start-2 w-max py-2 px-4 bg-prisma-900 text-white font-bold rounded text-sm hover:bg-prisma-800 active:bg-prisma-700"
+          className="form-button"
         >
           Log in
         </button>

styles/globals.css

@@ -19,3 +19,21 @@
     box-sizing: border-box;
   }
 }
+
+@layer components {
+  .form {
+    @apply w-full max-w-screen-xs mx-auto flex flex-col xs:grid xs:grid-cols-form xs:items-center gap-4;
+  }
+
+  .form-label {
+    @apply font-bold flex-1 xs:text-right;
+  }
+
+  .form-input {
+    @apply bg-prisma-50 w-full rounded py-2 px-3 text-sm;
+  }
+
+  .form-button {
+    @apply col-start-2 w-max py-2 px-4 bg-prisma-900 text-white font-bold rounded text-sm hover:bg-prisma-800 active:bg-prisma-700;
+  }
+}