From 6b689ea52f5c61991a95eacb08b6fe8608ab2617 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 5 Jun 2019 09:12:54 +0100
Subject: [PATCH] Extract form element styles

---
 package.json                   |  1 +
 postcss.config.js              |  1 +
 src/App.vue                    | 13 +++++++++++++
 src/components/SessionForm.vue |  4 ++--
 yarn.lock                      |  2 +-
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 9915d57..460948b 100644
--- a/package.json
+++ b/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"
diff --git a/postcss.config.js b/postcss.config.js
index 85f717c..bb7e10b 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-nested': {},
     autoprefixer: {}
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 9ea6b58..9fb80a8 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/components/SessionForm.vue b/src/components/SessionForm.vue
index 307975b..91280e1 100644
--- a/src/components/SessionForm.vue
+++ b/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">
diff --git a/yarn.lock b/yarn.lock
index 74ca20d..f05a3f4 100644
--- a/yarn.lock
+++ b/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==