diff --git a/assets/css/main.css b/assets/css/main.css
index c98c3ed..6b516e5 100755
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,6 +8,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @import "./safe.css";
+@import "./utilities.css";
 
 @layer base {
   @import "./base.css";
@@ -19,10 +20,6 @@
   @import "./buttons.css";
 }
 
-@layer utilities {
-  @import "./utilities.css";
-}
-
 @import "search.css";
 @import "social-share.css";
 @import "gallery-slider.css";
diff --git a/assets/css/navigation.css b/assets/css/navigation.css
index 7061bbd..839f3b6 100755
--- a/assets/css/navigation.css
+++ b/assets/css/navigation.css
@@ -35,7 +35,7 @@
 }
 
 .nav-dropdown-list {
-  @apply bg-body dark:bg-darkmode-body z-10 min-w-[180px] rounded p-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
+  @apply bg-body dark:bg-darkmode-body z-10 min-w-[180px] rounded p-4 shadow-sm hidden lg:invisible lg:absolute lg:block lg:opacity-0;
 }
 
 .nav-dropdown-item {
diff --git a/assets/css/safe.css b/assets/css/safe.css
index f0fc000..80835aa 100644
--- a/assets/css/safe.css
+++ b/assets/css/safe.css
@@ -1,3 +1,25 @@
+/* navbar toggler */
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ #nav-menu {
+  @apply block;
+}
+
+/* form style */
+.form-input {
+  @apply w-full rounded border-transparent bg-light px-6 py-4 text-text-dark placeholder:text-text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-light dark:text-darkmode-text-light;
+}
+
+.form-label {
+  @apply mb-4 block font-secondary text-xl font-normal text-text-dark dark:text-darkmode-text-light;
+}
+
 /* swiper pagination */
 .swiper-pagination-bullet {
   @apply !h-2.5 !w-2.5 !bg-light !opacity-100 dark:!bg-darkmode-light;
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index eb4664a..ff16f3b 100755
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -1,29 +1,3 @@
-/* navbar toggler */
-input#nav-toggle:checked + label #show-button {
-  @apply hidden;
-}
-
-input#nav-toggle:checked + label #hide-button {
-  @apply block;
-}
-
-input#nav-toggle:checked ~ #nav-menu {
-  @apply block;
-}
-
-.bg-gradient {
+@utility bg-gradient {
   @apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-light dark:to-darkmode-body;
 }
-
-.shadow {
-  @apply shadow-[0px_4px_40px_rgba(0,0,0,0.05)];
-}
-
-/* form style */
-.form-input {
-  @apply w-full rounded border-transparent bg-light px-6 py-4 text-text-dark placeholder:text-text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-light dark:text-darkmode-text-light;
-}
-
-.form-label {
-  @apply mb-4 block font-secondary text-xl font-normal text-text-dark dark:text-darkmode-text-light;
-}
diff --git a/exampleSite/tailwind-plugin/tw-theme.js b/exampleSite/tailwind-plugin/tw-theme.js
index 230a0f3..38f1c28 100644
--- a/exampleSite/tailwind-plugin/tw-theme.js
+++ b/exampleSite/tailwind-plugin/tw-theme.js
@@ -89,12 +89,25 @@ module.exports = plugin.withOptions(() => {
         colorUtils[`.text-${prefix}${cls}`] = { color: varRef };
         colorUtils[`.border-${prefix}${cls}`] = { borderColor: varRef };
         colorUtils[`.fill-${prefix}${cls}`] = { fill: varRef };
+        colorUtils[`.stroke-${prefix}${cls}`] = { stroke: varRef };
         colorUtils[`.from-${prefix}${cls}`] = {
           "--tw-gradient-from": varRef,
+          "--tw-gradient-via-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+          "--tw-gradient-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+        };
+        colorUtils[`.to-${prefix}${cls}`] = {
+          "--tw-gradient-to": varRef,
+          "--tw-gradient-via-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
+          "--tw-gradient-stops":
+            "var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
         };
-        colorUtils[`.to-${prefix}${cls}`] = { "--tw-gradient-to": varRef };
         colorUtils[`.via-${prefix}${cls}`] = {
-          "--tw-gradient-stops": varRef,
+          "--tw-gradient-via": varRef,
+          "--tw-gradient-via-stops":
+            "var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)",
         };
       });
     });