WIP Add Tailwind CSS

app/javascript/packs/application.js

@@ -7,7 +7,7 @@ require("@rails/ujs").start()
 require("turbolinks").start()
 require("channels")
 
-
+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

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

app/javascript/stylesheets/base.scss

@@ -0,0 +1,20 @@
+@layer base {
+  @font-face {
+    font-family: 'Raleway';
+    src: url('/fonts/raleway-light.woff') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  h1, h2, h3 {
+    @apply font-heading font-light;
+  }
+
+  h1 {
+    @apply uppercase;
+  }
+}

app/javascript/stylesheets/buttons.scss

@@ -0,0 +1,36 @@
+@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 py-2.5 px-5 shadow-md;
+  }
+
+  .btn-sm {
+    @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/tailwind.config.js

@@ -0,0 +1,21 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  purge: [
+    "./app/**/*.html.erb",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js"
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      fontFamily: {
+        heading: ['Raleway']
+      }
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}