Style forms, migrate more styles to Tailwind

app/javascript/stylesheets/application.scss

@@ -4,3 +4,5 @@
 
 @import "base";
 @import "buttons";
+@import "forms";
+@import "links";

app/javascript/stylesheets/buttons.scss

@@ -1,21 +1,16 @@
 @layer components {
-  .ks-text-link {
-    @apply text-blue-600;
-    &:hover   { @apply underline; }
-    &:visited { @apply text-indigo-600; }
-    &:active  { @apply text-red-600; }
-  }
-
   .btn {
     @apply font-semibold rounded-md leading-none cursor-pointer
            transition-colors duration-75 focus:outline-none focus:ring-4;
   }
 
   .btn-md {
+    @apply btn;
     @apply py-2.5 px-5 shadow-md;
   }
 
   .btn-sm {
+    @apply btn;
     @apply py-1 px-2 text-sm shadow-sm;
   }
 

app/javascript/stylesheets/forms.scss

@@ -0,0 +1,17 @@
+@layer components {
+  form {
+    input[type=text], input[type=email], input[type=password],
+    input[type=number], select {
+      @apply mt-1 rounded-md bg-gray-100 focus:bg-white
+             border-transparent focus:border-gray-500 focus:ring-0;
+    }
+
+    .field_with_errors {
+      @apply inline-block;
+    }
+
+    .error-msg {
+      @apply text-red-700;
+    }
+  }
+}

app/javascript/stylesheets/links.scss

@@ -0,0 +1,14 @@
+@layer components {
+  .ks-text-link {
+    @apply text-blue-600;
+    &:hover   { @apply underline; }
+    &:visited { @apply text-indigo-600; }
+    &:active  { @apply text-red-600; }
+  }
+
+  .devise-links {
+    a {
+      @apply ks-text-link;
+    }
+  }
+}

app/javascript/stylesheets/tailwind.config.js

@@ -17,5 +17,7 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms')
+  ],
 }