Separate generic and specific input box styles.

src/App.vue

@@ -10,4 +10,8 @@
   </div>
 </template>
 
-<style></style>
\ No newline at end of file
+<style>
+.inputBox {
+  @apply border-2 focus:outline-none focus:ring-2 focus:ring-blue-300;
+}
+</style>
\ No newline at end of file

src/components/ImageUpload.vue

@@ -19,25 +19,25 @@
           type="text"
           placeholder="Source"
           name="source"
-          class="payloadInput"
+          class="inputBox inputPayload"
         />
         <input
           type="text"
           placeholder="Parent"
           name="parent"
-          class="payloadInput"
+          class="inputBox inputPayload"
         />
         <textarea
           type="text"
           placeholder="Commentary"
           name="commentary"
-          class="payloadInput"
+          class="inputBox inputPayload"
         />
         <textarea
           type="text"
           placeholder="Commentary translation"
           name="commentary_translation"
-          class="payloadInput"
+          class="inputBox inputPayload"
         />
       </form>
     </div>
@@ -200,8 +200,8 @@ export default {
 };
 </script>
 
-<style>
-.payloadInput {
-  @apply border-2 focus:outline-none focus:ring-2 focus:ring-blue-300 pl-1 my-2;
+<style scoped>
+.inputPayload {
+  @apply pl-1 my-2;
 }
 </style>
\ No newline at end of file