tailwind structured folder

app/assets/stylesheets/application.css

@@ -1,15 +1,5 @@
 /*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+* this manifest loads automatically any css file from the ./css folder
+*
+*= require_tree ./css
+*/

app/assets/stylesheets/application.tailwind.css

@@ -1,13 +1,13 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* From Vendor */
+@import "tailwindcss/base"; 
+@import "tailwindcss/components"; 
+@import "tailwindcss/utilities";
 
-/*
+/* 
+* Your stylesheets ending with tailwind.css 
+* Bear in mind, you have to declare @import for each new file below
+* The .css suffix might be omitted!
+*/
+@import "tailwind/main.tailwind";
+@import "tailwind/navbar.tailwind";
 
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/

app/assets/stylesheets/css/main.css

@@ -0,0 +1,5 @@
+:root {
+  --color-primary: #00a19a;
+  --color-secondary: #535786;
+  --color-tertiary: yellow;
+}

app/assets/stylesheets/toastify.css → app/assets/stylesheets/css/toastify.css

@@ -19,8 +19,9 @@
 }
 
 .toastify-alert {
-    background: linear-gradient(135deg, darkred, red)
+    background: linear-gradient(135deg, darkred, blue)
 }
+
 .toastify.on {
     opacity: 1;
     top: 0;
@@ -82,11 +83,13 @@
 }
 
 @media only screen and (max-width: 360px) {
-    .toastify-right, .toastify-left {
+
+    .toastify-right,
+    .toastify-left {
         margin-left: auto;
         margin-right: auto;
         left: 0;
         right: 0;
         max-width: fit-content;
     }
-}
+}

app/assets/stylesheets/navbar.css

@@ -1,21 +0,0 @@
-nav {
-    background-color: black;
-    color: azure;
-
-    p {
-        background-color: aqua;
-    }
-
-
-    p:hover {
-        background-color: blueviolet;
-    }
-
-    &:hover p {
-        background-color: yellow;
-    }
-}
-
-p {
-    background-color: red;
-}

app/assets/stylesheets/tailwind/main.tailwind.css

@@ -0,0 +1,12 @@
+/* 
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
+
+.title {
+  @apply bg-gradient-to-r from-color-primary to-color-secondary text-yellow-400 sm:rounded-t-lg;
+}

app/assets/stylesheets/tailwind/navbar.tailwind.css

@@ -0,0 +1,24 @@
+nav {
+    @apply mb-4  text-red-300 bg-gradient-to-r from-color-primary to-color-secondary;
+
+    p {
+        background-color: aqua;
+    }
+
+
+    p:hover {
+        background-color: blueviolet;
+    }
+
+    &:hover p {
+        background-color: green;
+    } 
+
+    span {
+        @apply bg-gradient-to-r from-color-primary to-color-secondary text-black sm:rounded-t-lg p-4; 
+    }
+}
+
+p {
+    background-color: yellow;
+}

app/views/layouts/_navbar.html.erb

@@ -1,4 +1,6 @@
-<nav class='text-2xl p-4 '>
+<nav class='text-2xl p-4'>
   <%= fa_icon :eye %>
   <%= Rails.configuration.application_title %>
+  <span class='title'>this is a text</span>
+  <span>this is toto</span>
 </nav>

config/initializers/rails_live_reload.rb

@@ -4,7 +4,9 @@ if defined?(RailsLiveReload) && Rails.env.development?
   RailsLiveReload.configure do |config|
     # Default watched folders & files
     config.watch %r{app/views/.+\.(erb|haml|slim)$}
-    config.watch %r{(app|vendor)/(assets|javascript)/\w+/(.+\.(css|js|html|png|jpg|ts|jsx)).*}, reload: :always
+
+    # Rk: prevent any reload for files ending with '.tailwind.css'
+    config.watch %r{(app|vendor)/(assets|javascript)/.+\.(css|js|html|png|jpg)(?<!tailwind\.css)$}, reload: :always
 
     # USEFUL for tailwind changes!!!!
     config.watch %r{app/assets/builds/tailwind.css}, reload: :always

config/tailwind.config.js

@@ -12,6 +12,10 @@ module.exports = {
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },
+      colors: {
+        "color-primary": "var(--color-primary)",
+        "color-secondary": "var(--color-secondary)"
+      },
     },
   },
   plugins: [