Add thin scrollbar styling to CodeBox and Tabs components (nodejs#7489)

* Add thin scrollbar styling to CodeBox and Tabs components

* Add thin scrollbar styling to CodeBox and Tabs components

Author: clicktodev

apps/site/components/Common/CodeBox/index.module.css

@@ -12,6 +12,7 @@
     & > code {
       @apply font-ibm-plex-mono
         font-regular
+        scrollbar-thin
         grid
         overflow-x-auto
         bg-transparent

apps/site/components/Common/Tabs/index.module.css

@@ -3,6 +3,7 @@
 
   .tabsList {
     @apply font-open-sans
+      scrollbar-thin
       flex
       gap-2
       overflow-x-auto;

apps/site/tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
 
 export default {
   content: [
@@ -174,5 +175,12 @@ export default {
   plugins: [
     require('@savvywombat/tailwindcss-grid-areas'),
     require('@tailwindcss/container-queries'),
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        '.scrollbar-thin': {
+          'scrollbar-width': 'thin',
+        },
+      });
+    }),
   ],
 } satisfies Config;