view: added tailwind scrollbar dependencies

This commit is contained in:
Tigor Hutasuhut 2024-05-04 15:25:24 +07:00
parent 3f8f27270b
commit 396f426b9c
6 changed files with 20 additions and 23 deletions

View file

@ -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"

12
package-lock.json generated
View file

@ -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",

View file

@ -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"
}
}

View file

@ -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

View file

@ -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)
}

View file

@ -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;
}