Merge pull request #18 from eclectic-coding/10-add-option-for-tailwind

Add option for tailwind

lib/rails_app/cli.rb

@@ -11,12 +11,13 @@ def self.start
       assets = prompt.select("How would you like to manage assets?", %w[propshaft sprockets])
       styling_choices = [
         {name: "Bootstrap", value: "bootstrap"},
-        {name: "Tailwind CSS", value: "tailwindcss", disabled: "(coming soon)"},
+        {name: "Tailwind CSS", value: "tailwind"},
         {name: "Bulma", value: "bulma"},
         {name: "PostCSS", value: "postcss"},
         {name: "SASS", value: "sass"}
       ]
       styling = prompt.select("How would you like to manage styling?", styling_choices)
+      # database = prompt.select("Which database would you like to use?", %w[postgresql sqlite3 mysql trilogy oracle sqlserver jdbcmysql jdbcsqlite3 jdbcpostgresql jdbc])
 
       Command.new(app_name: app_name, assets: assets, styling: styling).run
     end

lib/rails_app/template/app_tailwind/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,18 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import "components/alerts.css";
+@import "components/buttons.css";
+@import "components/cards.css";
+@import "components/forms.css";
+@import "components/links.css";
+@import "components/pagination.css";
+@import "components/tables.css";
+@import "components/typography.css";
+
+@import "tailwindcss/utilities";
+
+/* Additional styles */
+@import "./custom.css";
+@import "flatpickr_themes/light.css";
+@import "simple_calendar.css";

lib/rails_app/template/app_tailwind/assets/stylesheets/components/alerts.css

@@ -0,0 +1,8 @@
+.notice {
+    @apply flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow;
+    @apply dark:text-gray-400 dark:bg-gray-800;
+
+    button {
+        @apply ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700;
+    }
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/components/buttons.css

@@ -0,0 +1,30 @@
+.btn {
+   @apply focus:ring-4 font-medium focus:outline-none;
+   @apply px-5 py-2.5;
+}
+
+.btn-sm {
+    @apply focus:ring-4 font-medium focus:outline-none;
+    @apply px-3 py-1.5;
+}
+
+.btn-primary {
+    @apply text-sm font-medium text-white;
+    @apply bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
+}
+
+.btn-outline-primary {
+    @apply text-sm font-medium text-primary-700;
+    @apply border border-primary-700 hover:bg-primary-700 hover:text-white focus:ring-primary-300 dark:border-primary-600 dark:hover:bg-primary-600 dark:hover:text-white dark:focus:ring-primary-800;
+}
+
+.btn-success {
+    @apply text-sm font-medium text-white;
+    @apply bg-success-700 hover:bg-success-800 focus:ring-success-300 dark:bg-success-600 dark:hover:bg-success-700 dark:focus:ring-success-800;
+}
+
+.btn-outline-success {
+    @apply text-sm font-medium text-success-700;
+    @apply border border-success-700 hover:bg-success-700 hover:text-white focus:ring-success-300 dark:border-success-600 dark:hover:bg-success-600 dark:hover:text-white dark:focus:ring-success-800;
+}
+

lib/rails_app/template/app_tailwind/assets/stylesheets/components/cards.css

@@ -0,0 +1,3 @@
+.card {
+    @apply block p-6 bg-white border border-gray-200 shadow;
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/components/forms.css

@@ -0,0 +1,21 @@
+@layer components {
+    .form-control {
+        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
+    }
+
+    .form-control-sm {
+        @apply block w-full p-2 text-gray-900 border border-gray-300 bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
+    }
+
+    .form-label {
+       @apply block mb-1 pr-1 text-sm font-medium text-gray-900 dark:text-white;
+    }
+
+    .form-check-input {
+        @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
+    }
+
+    .form-select {
+        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
+    }
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/components/links.css

@@ -0,0 +1,39 @@
+.nav-link {
+    @apply block py-2 px-3 text-gray-900 rounded md:border-0 md:p-0;
+    @apply text-gray-900 capitalize hover:bg-gray-200 md:dark:hover:text-red-500 md:hover:bg-transparent md:border-0 md:hover:text-red-700 md:p-0;
+    @apply dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent;
+
+    &.active {
+        @apply text-red-500;
+    }
+
+    &.hover {
+        @apply text-red-500;
+    }
+
+    a {
+        @apply text-gray-200;
+    }
+}
+
+.nav-link-dropdown {
+    @apply block text-gray-900 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white;
+
+    &.active {
+        @apply text-red-500;
+    }
+}
+
+.nav-dropdown-menu {
+    @apply z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600;
+}
+
+.nav-dropdown-button {
+    @apply flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent;
+}
+
+.admin-nav-link-active {
+    svg {
+        @apply text-white;
+    }
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/components/pagination.css

@@ -0,0 +1,39 @@
+/* Light Jumpstart theme for Pagy's default renderer */
+
+.pagination {
+    @apply inline-flex flex-wrap items-center justify-start;
+
+    .page {
+        &:first-child a, &:first-child {
+            @apply rounded-tl rounded-bl;
+        }
+
+        &:last-child a, &:last-child {
+            @apply rounded-tr rounded-br;
+        }
+    }
+
+    .disabled, .gap {
+        @apply border relative block leading-tight bg-white text-gray-500 no-underline py-2 px-3;
+        @apply dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600;
+        margin-left: -1px;
+    }
+
+    .page {
+        &.active {
+            @apply z-10 border border-primary-500 bg-primary-500 text-white relative block leading-tight no-underline py-2 px-3;
+            @apply dark:bg-primary-800 dark:text-gray-200 dark:border-primary-600;
+            margin-left: -1px;
+        }
+
+        a {
+            @apply border relative block leading-tight bg-white text-primary-500 no-underline py-2 px-3;
+            @apply dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600;
+            margin-left: -1px;
+
+            &:hover {
+                @apply bg-gray-200 dark:bg-gray-700;
+            }
+        }
+    }
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/components/tables.css

@@ -0,0 +1,19 @@
+.admin-table {
+   @apply w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border rounded;
+
+    thead {
+        @apply text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400;
+    }
+
+    thead tr th {
+        @apply border px-4 py-2;
+    }
+
+    tbody tr {
+        @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700;
+    }
+
+    tbody tr td {
+        @apply border px-4 py-2;
+    }
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/components/typography.css

@@ -0,0 +1,32 @@
+.font-display {
+    @apply text-5xl font-bold leading-tight tracking-tight;
+}
+
+
+h1, .h1 {
+    @apply text-4xl font-bold leading-tight tracking-tight;
+}
+
+h2, .h2 {
+    @apply text-3xl font-bold leading-tight;
+}
+
+h3, .h3 {
+    @apply text-2xl font-bold leading-normal;
+}
+
+h4, .h4 {
+    @apply text-xl font-bold leading-normal;
+}
+
+h5, .h5 {
+    @apply text-lg font-bold leading-normal;
+}
+
+h6, .h6 {
+    @apply font-bold;
+}
+
+a {
+    @apply text-primary-600 hover:text-primary-500;
+}

lib/rails_app/template/app_tailwind/assets/stylesheets/custom.css

@@ -0,0 +1,3 @@
+.debug-dump {
+  color: red;
+}