Tailwind CSS v4.0 support
Opened this issue · 5 comments
with the Tailwind CSS v4.0 beta, this error is given regardless of using the config file or the new CSS-first approach to import this plugin, appreciate anyone could take a look!
[plugin:@tailwindcss/vite:generate:serve] Package subpath './lib/util/flattenColorPalette' is not defined by "exports" in /Users/.../Documents/.../node_modules/.pnpm/tailwind-scrollbar@3.1.0_tailwindcss@4.0.0-beta.1/node_modules/tailwindcss/package.json
tailwindlabs/tailwindcss#15318 this should fix the bug, needs to confirm once it's out
tailwindlabs/tailwindcss#15318 this should fix the bug, needs to confirm once it's out
This error is resolved at tailwindcss@4.0.0-beta.7, but at the same time the following different errors occur
Package subpath './lib/util/toColorValue' is not defined by "exports" in repo/node_modules/.pnpm/tailwind-scrollbar@3.1.0_tailwindcss@4.0.0-beta.7/node_modules/tailwindcss/package.json
This toColorValue function does not exist in the tailwind v4 code, so it may need to be addressed on the tailwind-scrollbar side
thanks!
So, for full transparency here, I'm going to drag my heels on officially supporting v4 until I can get the package's test suite running using their new architecture. The way Tailwind is actually invoked has changed in v4 (i.e. it's not just a postcss plugin anymore), and that means that none of the tests are presently able to run.
Although it may seem like a simple little plugin, it's shockingly difficult to target pseudoclasses of pseudoelements (think ::-webkit-scrollbar-thumb:hover) in Tailwind. As a result, this plugin has to do some manipulation on the postcss AST that Tailwind generates, and that's a little dangerous; it's easy to create scenarios like #101 where that manipulation inadvertently messes up the CSS output from completely unrelated packages. I have tests in the test suite that should prevent any regressions, and I want confirmation from them before I go about releasing anything. Additionally, I'm not even sure that the approach the package uses will work at all in the new architecture, which could require a partial rewrite.
I'll finally have some down time at work this month, so I'm hoping to find time to do some reading on how the authors intend Tailwind to be invoked now
I've released a version that's compatible with Tailwind 4 as tailwind-scrollbar@4.0.0-beta.0. The following breaking changes apply only to it, not the 3.x.x releases.
As I feared, the (admittedly shady) system I was using to get hover: and active: to work was rendered ineffective by the new compiler Tailwind is using. This means that a class like hover:scrollbar-thumb-red-100 will revert to being applied when the element is hovered, not the scrollbar's thumb. Most of the time, that's not what you want - although I do like that this logic is now at least possible (if unusual).
In its place, I've added a couple of dedicated variants, scrollbar-hover: and scrollbar-active:. These really mean "scrollbar thumb hovered/active," but it's usually the thumb you want to target with these variants. If for some reason you really do want to target the track or corner's hover/active states, I've also added scrollbar-track-hover:, scrollbar-track-active:, scrollbar-corner-hover:, and scrollbar-corner-active: (but if you use them, I will think you are a weirdo).
tl;dr: Use tailwind-scrollbar@4.0.0-beta.0 for compatibility with Tailwind 4. Do a global find and replace for hover:scrollbar to scrollbar-hover:scrollbar and active:scrollbar to scrollbar-active:scrollbar.