merge: main -> tailwind-centralized

Author: Brayan-724

js/react/lib/styles.css

@@ -1 +1,28 @@
 @import "@rustlanges/styles";
+
+@layer utilities {
+  @supports not selector(::-webkit-scrollbar) {
+    .scrollbar {
+      scrollbar-color: var(--color-neutral-300) var(--color-neutral-100);
+
+      @variant dark {
+        scrollbar-color: var(--color-neutral-900) var(--color-neutral-600);
+      }
+    }
+  }
+
+  .scrollbar::-webkit-scrollbar {
+    @apply w-4;
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    @apply rounded-full bg-neutral-100 dark:bg-neutral-900;
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-neutral-300 transition dark:bg-neutral-600;
+  }
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply opacity-90;
+  }
+}

js/react/showcase/App.tsx

@@ -258,6 +258,11 @@ export function App() {
           },
         }}
       />
+      <ShowComponent title="Scroll bar ">
+        <div className="scrollbar mx-auto h-48 w-full overflow-auto">
+          <div className="mx-auto flex h-96 w-20 items-center">Container</div>
+        </div>
+      </ShowComponent>
     </div>
   );
 }