refact css tailwind

resources/sass/components/nav.scss

@@ -1,14 +1,14 @@
 
 nav {
-    @apply w-48;
+    @apply w-48 h-screen bg-gray-800 flex flex-col justify-between shadow;
     transition: width 0.3s;
 
     svg {
-        @apply fill-current text-primary-600 w-12 p-2;
+        @apply fill-current text-gray-300 w-12 p-2;
         transition: color 0.3s;
 
         &:hover {
-            @apply text-primary-800;
+            @apply text-white;
         }
     }
 
@@ -22,24 +22,24 @@ nav {
     }
 
     .nav-item {
-        @apply flex items-center;
-
+        @apply flex items-center text-gray-100;
+        transition: background-color 0.3s;
 
         span {
             @apply font-bold text-xl ml-2 overflow-hidden truncate;
             transition: width 0.3s;
 
             &:hover {
-                @apply text-primary-800;
+                @apply text-white;
             }
         }
 
         &:hover {
-            @apply bg-primary-500;
+            @apply bg-gray-900;
 
             span,
             svg {
-                @apply text-primary-800;
+                @apply text-white;
             }
         }
     }