Namespace CSS
Closed this issue · 6 comments
I'm running into issues where kit-docs tailwind styles are taking precedence over my tailwind styles. This is causing my rules for different sized viewports to be ignored. Would it be possible to namespace the CSS so that the styles don't leak, as described here: sveltejs/kit#6706
CleanShot.2023-02-07.at.3.46.51.mp4
I think the simpler option is to simply make sure that any custom theme config we apply is namespaced:
https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/tailwind.config.cjs#L11-L39
So fonts being kd-sans, screens being kd-420, and colors being kd-brand, kd-border, etc.
I don't think we need to prefix everything because there's just no need and you'll end up loading all utility styles twice.
@mihar-22, I don't think that will work. KitDocs CSS is loaded after my CSS so it takes precedence over my CSS and you have not included the .sm:xxx modifier. The net result is that the classes from kit-docs are taking precedence over my CSS and my .sm: modifier is getting overridden by later rules in KitDocs
Here is how the CSS styles are applied to the same element before and after visiting the KitDocs pages:
| Before | After |
|---|---|
 |
 |
It would be ideal if Svelte provided some way of removing the KitDocs CSS when not on a KitDocs route but that does not seem possible (or I'm not sure how).
What do you think? What's the best way forward?
I think I'm missing something. What element are you trying to style in which KitDocs is eventually overriding?
Oh...... wait you're loading the KitDocs Tailwind CSS file. You need to follow the Tailwind integration docs. They're not great docs but the idea is you should copy over the config if you're also using Tailwind.
Ok, now I've got it. THANK YOU!
It would be handy if the source theme.css file was available in the packaged version of KitDocs then I could do @import it (without all the Tailwind utility classes) rather than copy-pasting it.