CSS bugs after installing shadcn
I followed this for shadcn: https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553
which does work and i can see the component when i put it in the file, but it then messes up some of the css on the site, e.g. in dark mode the middle section is still white but the outer is in dark mode
Gist
Using ShadCN with Wasp 0.12+
Using ShadCN with Wasp 0.12+. GitHub Gist: instantly share code, notes, and snippets.
8 Replies
Hi @oli. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain specific information about CSS bugs after installing shadcn in a Wasp project. It's possible that the issue might be related to the specific CSS rules of your project or the way shadcn interacts with them.
However, I would recommend checking the following:
1. Ensure that the shadcn components are not overriding your CSS rules. Shadcn components might have their own styles that could potentially conflict with your existing CSS.
2. Check if there are any CSS rules that are being applied globally that might affect the shadcn components.
3. Try isolating the problem by creating a new page with only the shadcn components and see if the issue persists.
If the issue persists, I would recommend reaching out to the Wasp community or the shadcn community for more specific help.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
@miho Can I forward this one to you? 😅
@oli The way to debug this is to see why the BG is white.
- Which classes overriding which?
- Maybe there is some custom CSS written for Open SaaS you should delete?
- Maybe you need to remove some of the Tailwind CSS classes applied to the problematic
div?i kind of gave up but most likely it is due to the new main.css and tailwind config after shadcn installation
You gave up on ShadCN or OpenSaaS? 🙂 Let us help you figure it out before that!
don't worry just shadcn 😹
Wohooo @oli, you just became a Waspeteer level 2!
Whew 😅
Just kidding, we can still help out if you decide to give it another try.
Until then, happy hacking!