gutted plugin for single custom-scrollbar class

argyleink · argyleink · commit 02669d8a57f7 · 2025-08-27T22:21:55.000-07:00
diff --git a/package.json b/package.json
@@ -45,7 +45,6 @@
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "sharp": "^0.33.5",
-    "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -38,7 +38,7 @@ const description = Astro.props.description ?? starpodConfig.description;
 ---
 
 <!doctype html>
-<html class="scrollbar-thin" lang="en">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
@@ -110,7 +110,7 @@ const description = Astro.props.description ?? starpodConfig.description;
     class="font-inter text-light-text-body dark:bg-dark-background dark:text-dark-text-body antialiased"
   >
     <header
-      class="scrollbar-thin lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-112 lg:items-start lg:overflow-y-auto xl:w-120"
+      class="custom-scrollbar lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-112 lg:items-start lg:overflow-y-auto xl:w-120"
     >
       <div class="relative z-10 mx-auto lg:min-h-full lg:flex-auto">
         <div
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -10,7 +10,11 @@ main:has(+ * + #audio-player .player) {
   }
 }
 
-.scrollbar-thin {
+html {
+  color-scheme: light dark;
+}
+
+html, .custom-scrollbar {
   scrollbar-color: var(--color-light-input-border) transparent;
 
   @media (prefers-color-scheme: dark) {
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 
 @plugin '@tailwindcss/forms';
-@plugin 'tailwind-scrollbar';
 @plugin '@tailwindcss/typography';
 
 @theme {

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,11 @@ main:has(+ * + #audio-player .player) {`
`10`	`10`	`}`
`11`	`11`	`}`
`12`	`12`
`13`		`-.scrollbar-thin {`
	`13`	`+html {`
	`14`	`+ color-scheme: light dark;`
	`15`	`+}`
	`16`	`+`
	`17`	`+html, .custom-scrollbar {`
`14`	`18`	`scrollbar-color: var(--color-light-input-border) transparent;`
`15`	`19`
`16`	`20`	`@media (prefers-color-scheme: dark) {`