Switch from Webpacker to cssbundling-rails, upgrade Tailwind

app/javascript/packs/application.js

@@ -7,7 +7,7 @@ require("@rails/ujs").start()
 require("turbolinks").start()
 require("channels")
 
-import "stylesheets/application"
+// import "stylesheets/application"
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.

app/javascript/stylesheets/application.scss

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

app/javascript/stylesheets/base.scss

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

app/javascript/stylesheets/buttons.scss

@@ -1,31 +0,0 @@
-@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/javascript/stylesheets/forms.scss

@@ -1,17 +0,0 @@
-@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

@@ -1,14 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
-  purge: {
-    layers: ['base', 'components', 'utilities'],
-    content: [
-      "./app/**/*.html.erb",
-      "./app/helpers/**/*.rb",
-      "./app/javascript/**/*.js"
-    ]
-  },
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Open Sans', 'sans-serif']
-      }
-    },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [
-    require('@tailwindcss/forms')
-  ],
-}