Extract form element styles

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "core-js": "^2.6.5",
+    "postcss-nested": "^4.1.2",
     "tailwindcss": "^1.0.1",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3"

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-nested': {},
     autoprefixer: {}
   }
 }

src/App.vue

@@ -54,6 +54,19 @@ export default {
 <style type="postcss">
 @tailwind base;
 
+input,
+textarea {
+  @apply w-full border border-gray-400 p-2 mt-1
+}
+
+input[type=submit] {
+  @apply w-full;
+
+  @screen sm {
+    @apply w-auto
+  }
+}
+
 @tailwind components;
 
 @tailwind utilities;

src/components/SessionForm.vue

@@ -9,12 +9,12 @@
     <form action="" @submit.prevent="submit">
       <label class="block mb-4">
         Title
-        <input name="title" type="text" class="w-full border border-gray-400 p-2 mt-1" v-model="form.title" required/>
+        <input name="title" type="text" v-model="form.title" required/>
       </label>
 
       <label class="block mb-4">
         Abstract
-        <textarea name="title" rows="5" class="w-full border border-gray-400 p-2 mt-1" v-model="form.body" required/>
+        <textarea name="title" rows="5" v-model="form.body" required/>
       </label>
 
       <input class="cursor-pointer bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-gray-100 px-4 py-2 rounded" type="submit" value="Submit session">

yarn.lock

@@ -7422,7 +7422,7 @@ postcss-modules-values@^1.3.0:
     icss-replace-symbols "^1.1.0"
     postcss "^6.0.1"
 
-postcss-nested@^4.1.1:
+postcss-nested@^4.1.1, postcss-nested@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.1.2.tgz#8e0570f736bfb4be5136e31901bf2380b819a561"
   integrity sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==