From ef9e756ce50c2c024d360074adbbb8263b3446a5 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 6 Jun 2026 22:47:39 +0800 Subject: [PATCH] fix: restore scrollbar styles broken by tailwind v4.3 upgrade Tailwind v4.3 introduced built-in scrollbar utilities that conflicted with the tailwind-scrollbar plugin, causing visual regressions. Fixed by inlining the pre-v4.3 build output directly into main.css, which also eliminates the need for the tailwind-scrollbar plugin. --- assets/css/compiled/main.css | 50 ++++--------- assets/css/main.css | 39 +++++++++- package-lock.json | 135 ++++++++--------------------------- package.json | 1 - tailwind.config.js | 1 - 5 files changed, 81 insertions(+), 145 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 96463b1b..cf3f2266 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */ @layer properties; @layer theme, base, components, utilities; @@ -207,6 +207,9 @@ } } @layer utilities { + .\@container { + container-type: inline-size; + } .pointer-events-auto { pointer-events: auto; } @@ -263,15 +266,9 @@ .-start-6 { inset-inline-start: calc(var(--spacing) * -6); } - .start { - inset-inline-start: var(--spacing); - } .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] { inset-inline-start: calc(max(-50vw, -800px) + 50%); } - .end { - inset-inline-end: var(--spacing); - } .end-6 { inset-inline-end: calc(var(--spacing) * 6); } @@ -1015,29 +1012,6 @@ .box-content { box-sizing: content-box; } - .scrollbar { - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track); - border-radius: var(--scrollbar-track-radius); - } - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - border-radius: var(--scrollbar-thumb-radius); - } - &::-webkit-scrollbar-corner { - background-color: var(--scrollbar-corner); - border-radius: var(--scrollbar-corner-radius); - } - @supports (-moz-appearance:none) { - scrollbar-width: auto; - scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial); - } - &::-webkit-scrollbar { - display: block; - width: var(--scrollbar-width, 16px); - height: var(--scrollbar-height, 16px); - } - } .line-clamp-3 { overflow: hidden; display: -webkit-box; @@ -4822,6 +4796,14 @@ pre { } } } +@layer base { + * { + @supports (-moz-appearance:none) { + scrollbar-color: initial; + scrollbar-width: initial; + } + } +} body:has(#mobile-menu-toggle:checked) { overflow: hidden; } @@ -5002,14 +4984,6 @@ body:has(#mobile-menu-toggle:checked) { outline: 1px auto -webkit-focus-ring-color; } } -@layer base { - * { - @supports (-moz-appearance:none) { - scrollbar-color: initial; - scrollbar-width: initial; - } - } -} @property --tw-translate-x { syntax: "*"; inherits: false; diff --git a/assets/css/main.css b/assets/css/main.css index 345befa8..b6d2ccc8 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -268,7 +268,44 @@ pre { } .bf-scrollbar { - @apply scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600; + &::-webkit-scrollbar-track { + background-color: var(--scrollbar-track); + border-radius: var(--scrollbar-track-radius); + } + &::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--scrollbar-thumb-radius); + } + &::-webkit-scrollbar-corner { + background-color: var(--scrollbar-corner); + border-radius: var(--scrollbar-corner-radius); + } + @supports (-moz-appearance:none) { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial); + } + &::-webkit-scrollbar { + display: block; + width: 8px; + height: 8px; + } + --scrollbar-thumb: oklch(70.8% 0 0); + --scrollbar-track: oklch(92.2% 0 0); + &:is(.dark *) { + --scrollbar-thumb: oklch(43.9% 0 0); + } + &:is(.dark *) { + --scrollbar-track: oklch(26.9% 0 0); + } + } +} + +@layer base { + * { + @supports (-moz-appearance:none) { + scrollbar-color: initial; + scrollbar-width: initial; + } } } diff --git a/package-lock.json b/package-lock.json index 36a216c1..a9a4c266 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,6 @@ "prettier-plugin-go-template": "^0.0.15", "puppeteer": "^24.42.0", "rimraf": "^6.1.3", - "tailwind-scrollbar": "^4.0.2", "tailwindcss": "^4.3.0", "tw-elements": "2.0.0", "typeit": "^8.8.7", @@ -100,17 +99,6 @@ "dev": true, "license": "Apache-2.0" }, - "node_modules/@emnapi/wasi-threads": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", - "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@floating-ui/core": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz", @@ -884,6 +872,9 @@ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -901,6 +892,9 @@ "arm64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -918,6 +912,9 @@ "x64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -935,6 +932,9 @@ "x64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -974,51 +974,6 @@ "node": ">=14.0.0" } }, - "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": { - "version": "1.2.1", - "dev": true, - "inBundle": true, - "license": "MIT", - "optional": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, - "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": { - "version": "1.1.4", - "dev": true, - "inBundle": true, - "license": "MIT", - "optional": true, - "dependencies": { - "@tybys/wasm-util": "^0.10.1" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/Brooooooklyn" - }, - "peerDependencies": { - "@emnapi/core": "^1.7.1", - "@emnapi/runtime": "^1.7.1" - } - }, - "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": { - "version": "0.10.1", - "dev": true, - "inBundle": true, - "license": "MIT", - "optional": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, - "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": { - "version": "2.8.1", - "dev": true, - "inBundle": true, - "license": "0BSD", - "optional": true - }, "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz", @@ -1402,13 +1357,6 @@ "undici-types": "~7.19.0" } }, - "node_modules/@types/prismjs": { - "version": "1.26.5", - "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz", - "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/trusted-types": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", @@ -1858,7 +1806,6 @@ "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10" } @@ -2297,7 +2244,6 @@ "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "dev": true, "license": "ISC", - "peer": true, "engines": { "node": ">=12" } @@ -2483,8 +2429,7 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1595872.tgz", "integrity": "sha512-kRfgp8vWVjBu/fbYCiVFiOqsCk3CrMKEo3WbgGT2NXK2dG7vawWPBljixajVgGK9II8rDO9G0oD0zLt3I1daRg==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/dompurify": { "version": "3.4.3", @@ -2514,9 +2459,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.21.3", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.3.tgz", - "integrity": "sha512-QyL119InA+XXEkNLNTPCXPugSvOfhwv0JOlGNzvxs0hZaiHLNvXSpudUWsOlsXGWJh8G6ckCScEkVHfX3kw/2Q==", + "version": "5.23.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.23.0.tgz", + "integrity": "sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==", "dev": true, "license": "MIT", "dependencies": { @@ -3166,6 +3111,9 @@ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3187,6 +3135,9 @@ "arm64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3208,6 +3159,9 @@ "x64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3229,6 +3183,9 @@ "x64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3318,6 +3275,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -3723,7 +3681,6 @@ "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -3749,20 +3706,6 @@ "prettier": "^3.0.0" } }, - "node_modules/prism-react-renderer": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz", - "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/prismjs": "^1.26.0", - "clsx": "^2.0.0" - }, - "peerDependencies": { - "react": ">=16.0.0" - } - }, "node_modules/progress": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", @@ -3964,6 +3907,7 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" } @@ -4107,28 +4051,11 @@ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, - "node_modules/tailwind-scrollbar": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-4.0.2.tgz", - "integrity": "sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==", - "dev": true, - "license": "MIT", - "dependencies": { - "prism-react-renderer": "^2.4.1" - }, - "engines": { - "node": ">=12.13.0" - }, - "peerDependencies": { - "tailwindcss": "4.x" - } - }, "node_modules/tailwindcss": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz", "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/tapable": { "version": "2.3.3", diff --git a/package.json b/package.json index d888e7f4..8af10e5d 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "prettier-plugin-go-template": "^0.0.15", "puppeteer": "^24.42.0", "rimraf": "^6.1.3", - "tailwind-scrollbar": "^4.0.2", "tailwindcss": "^4.3.0", "tw-elements": "2.0.0", "typeit": "^8.8.7", diff --git a/tailwind.config.js b/tailwind.config.js index 1110d732..baced067 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -174,6 +174,5 @@ module.exports = { plugins: [ require("@tailwindcss/typography"), require("@tailwindcss/forms"), - require("tailwind-scrollbar")({ preferredStrategy: "pseudoelements" }), ], };