added no-scrollbar utility (#3031)

* added no-scrollbar utility

* added responsive variants

* undo prettier on global.css

apps/web/components/NavTabs.tsx

@@ -28,7 +28,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
   return (
     <>
       <nav
-        className="-mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
+        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
         aria-label="Tabs"
         {...props}>
         {tabs.map((tab) => {

apps/web/styles/globals.css

@@ -9,6 +9,25 @@
   --brand-text-color-dark-mode: #292929;
 }
 
+/*
+  Adds Utility to hide scrollbar to tailwind
+    https://github.com/tailwindlabs/tailwindcss/discussions/2394
+    https://github.com/tailwindlabs/tailwindcss/pull/5732
+*/
+@layer utilities {
+  @variants responsive {
+    /* Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    .no-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+    }
+  }
+}
+
 /*
  * Override the default tailwindcss-forms styling (default is: 'colors.blue.600')
  * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006