view: added tailwind scrollbar dependencies

.air.toml

@@ -19,7 +19,7 @@ exclude_unchanged = false
 follow_symlink = false
 full_bin = ""
 include_dir = []
-include_ext = ["go", "tpl", "tmpl", "html", "sql", "templ"]
+include_ext = ["go", "tpl", "tmpl", "html", "sql", "templ", "css"]
 include_file = [".env"]
 kill_delay = "1000ms"
 log = "build-errors.log"

package-lock.json

@@ -12,6 +12,7 @@
         "@tailwindcss/typography": "^0.5.10",
         "daisyui": "^4.6.3",
         "rollup": "^4.9.6",
+        "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.1"
       }
     },
@@ -1383,6 +1384,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz",
+      "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",

package.json

@@ -11,6 +11,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "daisyui": "^4.6.3",
     "rollup": "^4.9.6",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1"
   }
 }

tailwind.config.js

@@ -4,7 +4,11 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require("daisyui"), require("@tailwindcss/typography")],
+  plugins: [
+    require("daisyui"),
+    require("@tailwindcss/typography"),
+    require("tailwind-scrollbar")({ noCompatible: true }),
+  ],
   daisyui: {
     themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
     darkTheme: "dark", // name of one of the included themes for dark mode

views/homeview/homeview.templ

@@ -123,7 +123,7 @@ templ nsfwToggle(c *views.Context, data Data) {
 }
 
 templ RecentlyAddedImageList(images models.ImageSlice, opts components.ImageCardOption) {
-	<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full">
+	<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full scrollbar-track-base-100 scrollbar-thumb-base-200 scrollbar-thin">
 		for _, data := range images {
 			@components.ImageCard(data, 0)
 		}

views/style.css

@@ -1,23 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-::-webkit-scrollbar {
-  @apply w-2 h-2;
-}
-
-::-webkit-scrollbar:hover {
-  @apply scale-110;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-base-100;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-base-200 rounded-xl;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-base-300;
-}