[bug] Tailwind version issue?

[larryh-23andme]

Have you seen anyone hit a snag when importing RangeSlider 4 into a Svelte 5 app that uses Tailwind 3? That's what I'm working with and I get this error:
RangeSlider.svelte.vite-preprocess.css:6:3: '@layer base' is used but no matching '@tailwind base' directive is present.
My project has TW base imported and also has a custom base layer. Seems like a TW version compat issue, or perhaps your use of base is not aligning? Would a custom layer name work better here?
Thoughts? I can't upgrade the app to TW 4 at the moment to see if that fixes it on my side. But it would be nice if RangeSlider 4 could slide right in. ;-)
Thanks for building this component, hope to use it.

[naatumach]

What a coincidence, i am having the same issue. I am not sure how to resolve this either.

[simeydotme]

hmmm...

Is there a chance you can recreate a reduced test case of this in StackBlitz, CodeSpaces or similar?
I did test and I don't think there's any conflict;

https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles (v4)
https://v3.tailwindcss.com/docs/adding-custom-styles#using-css-and-layer (v3)

I wonder if you just need to add a @tailwind base; statement into your css file ?

[simeydotme]

As for why I'm using base; I believe it was so that if you want to author a RangeSlider component in your codebase, you can use your own @layer components or @layer slider to place your component-specific css var overrides on top of the base css styles without having source-order issues. Conventionally the base layer is sourced before any component or slider layers.

[simeydotme]

So I have a file, locally, where I tested the tailwind... I seem to have committed the tailwind app.css file which it uses;

svelte-range-slider-pips/src/routes/app.css

Line 4 in 116b049

themes:

, this is what I tested and it's fine ... but indeed it's using tailwind4

someone suggested telling postCSS to ignore the RangeSlider component, but I must say I don't really know how to do that -- would need to test with a reduced test-case.

[larryh-23andme]

@simeydotme for my TW3 app, i've had the @tailwind base in my css all along. I even have a @layer base call in the same file and it all works. it's a large app so I'm not exactly sure what minimal pieces i'd need to replicate this issue. searching around on this issue seems to hit on a TW version clash. i also saw the solution idea of postCSS processing them separately, but that seems like a total pain. any other thoughts? in the meantime, i can try to put together a repl. thanks!

[naatumach]

I was able to upgrade to TW4. That fixed my issue.

[simeydotme]

That's cool @naatumach , hope the <RangeSlider /> works great for you!

---

For you @larryh-23andme , would RangeSlider v3 not be suitable for your use-case?.. There's a few new features in v4 which do make it superior in general... but v3 was still a great slider with a ton of features, and it was not using the @layer css property. However v3 did have some compatibility issues with DaisyUI due to css class naming conventions (easy to fix with some scoped css)

Alternatively, is the error you're getting causing a build failure, or a runtime failure? If it's just a warning with some broken css, it may be possible to just copy the css variables from the @layer declaration and move them into your own css file.

Or you can even just copy the whole slider component (and pips component) into your own project and delete the @layer if you aren't planning to keep upgrading. I haven't received any major bug reports so I think it's pretty much stable.

---

I'm a little reluctant to modify the library right now, as I would have to move to v5.0.0 to avoid recking people's setups. I do note, though, that I actually forgot to put the @layer in the pips component. :') ... however it was a progressive enhancement and not essential.

I actually did try to move all the CSS into a separate file so I didn't have to wrap everything with :global(), but I had problems trying to bundle it as a vanilla component (non svelte) with that architecture. I couldn't get the package.json to allow me to import the css.

[larryh-23andme]

Work stuff is blocking me from diving into this. Feel free to close this Issue for now. It's likely a vite/postcss compile thing and not really an issue with your library. If I can get back to it, and still see an prob, then i'll reopen this Issue. Thanks for putting svelte-range-slider out there!