Switch from Webpacker to cssbundling-rails, upgrade Tailwind

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds
+//= link legacy.css

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "components/base";
+@import "components/buttons";
+@import "components/forms";
+@import "components/links";

app/assets/stylesheets/components/base.css

@@ -0,0 +1,21 @@
+@layer base {
+  body {
+    @apply leading-none
+  }
+
+  h1, h2, h3 {
+    @apply font-light;
+  }
+
+  h1 {
+    @apply text-3xl uppercase;
+  }
+
+  h2 {
+    @apply text-2xl mb-8;
+  }
+
+  h3 {
+    @apply text-xl mb-6;
+  }
+}

app/assets/stylesheets/components/buttons.css

@@ -0,0 +1,31 @@
+@layer components {
+  .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;
+  }
+
+  .btn-gray {
+    @apply bg-gray-100 hover:bg-gray-200
+           focus:ring-gray-300 focus:ring-opacity-75;
+  }
+
+  .btn-blue {
+    @apply bg-blue-500 hover:bg-blue-600 text-white
+           focus:ring-blue-400 focus:ring-opacity-75;
+  }
+
+  .btn-red {
+    @apply bg-red-600 hover:bg-red-700 text-white
+           focus:ring-red-500 focus:ring-opacity-75;
+  }
+}

app/assets/stylesheets/components/forms.css

@@ -0,0 +1,15 @@
+@layer components {
+  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/assets/stylesheets/components/links.css

@@ -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;
+    }
+  }
+}