add tailwind-scollbars

package.json

@@ -32,6 +32,7 @@
     "rutorrent-promise": "^2.0.0",
     "shvl": "^3.0.0",
     "swr": "^1.3.0",
+    "tailwind-scrollbar": "^2.0.1",
     "tough-cookie": "^4.1.2",
     "winston": "^3.8.2"
   },

pnpm-lock.yaml

@@ -35,6 +35,7 @@ specifiers:
   rutorrent-promise: ^2.0.0
   shvl: ^3.0.0
   swr: ^1.3.0
+  tailwind-scrollbar: ^2.0.1
   tailwindcss: ^3.1.8
   tough-cookie: ^4.1.2
   typescript: ^4.8.3
@@ -63,6 +64,7 @@ dependencies:
   rutorrent-promise: 2.0.0
   shvl: 3.0.0
   swr: 1.3.0_react@18.2.0
+  tailwind-scrollbar: 2.0.1_tailwindcss@3.1.8
   tough-cookie: 4.1.2
   winston: 3.8.2
 
@@ -2620,6 +2622,15 @@ packages:
       react: 18.2.0
     dev: false
 
+  /tailwind-scrollbar/2.0.1_tailwindcss@3.1.8:
+    resolution: {integrity: sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 3.x
+    dependencies:
+      tailwindcss: 3.1.8_postcss@8.4.16
+    dev: false
+
   /tailwindcss/3.1.8_postcss@8.4.16:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}

tailwind.config.js

@@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+const tailwindForms = require("@tailwindcss/forms");
+const tailwindScrollbars = require("tailwind-scrollbar");
+
 module.exports = {
   darkMode: "class",
   content: ["./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}"],
@@ -6,19 +9,19 @@ module.exports = {
     extend: {
       colors: {
         theme: {
-          ["50"]: "rgb(var(--color-50) / <alpha-value>)",
-          ["100"]: "rgb(var(--color-100) / <alpha-value>)",
-          ["200"]: "rgb(var(--color-200) / <alpha-value>)",
-          ["300"]: "rgb(var(--color-300) / <alpha-value>)",
-          ["400"]: "rgb(var(--color-400) / <alpha-value>)",
-          ["500"]: "rgb(var(--color-500) / <alpha-value>)",
-          ["600"]: "rgb(var(--color-600) / <alpha-value>)",
-          ["700"]: "rgb(var(--color-700) / <alpha-value>)",
-          ["800"]: "rgb(var(--color-800) / <alpha-value>)",
-          ["900"]: "rgb(var(--color-900) / <alpha-value>)",
+          50: "rgb(var(--color-50) / <alpha-value>)",
+          100: "rgb(var(--color-100) / <alpha-value>)",
+          200: "rgb(var(--color-200) / <alpha-value>)",
+          300: "rgb(var(--color-300) / <alpha-value>)",
+          400: "rgb(var(--color-400) / <alpha-value>)",
+          500: "rgb(var(--color-500) / <alpha-value>)",
+          600: "rgb(var(--color-600) / <alpha-value>)",
+          700: "rgb(var(--color-700) / <alpha-value>)",
+          800: "rgb(var(--color-800) / <alpha-value>)",
+          900: "rgb(var(--color-900) / <alpha-value>)",
         },
       },
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [tailwindForms, tailwindScrollbars],
 };