Tailwindui theme
Hi all,
I'm struggling to install this theme https://tailwindui.com/templates/catalyst on a wasp project (open-saas.sh more specifically), and I have a lot of errors.
Do you think, Is it possible to do it?
10 Replies
Hi @arresejo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to integrate Tailwind UI themes into a Wasp project. However, you need to ensure that you have correctly set up Tailwind CSS in your Wasp project. Here are the steps you need to follow:
1. Add two config files —
tailwind.config.cjs and postcss.config.cjs — to the root directory of your project. Wasp will install the necessary dependencies and copy your configuration to the generated project. You can then use Tailwind CSS directives in your CSS and Tailwind classes on your React components. source (https://wasp-lang.dev/docs/project/css-frameworks#tailwind)
2. If you want to add Tailwind plugins, install them as npm development dependencies and add them to the plugins list in your tailwind.config.cjs file. source (https://wasp-lang.dev/docs/project/css-frameworks#adding-tailwind-plugins)
3. If you are migrating from an older version of Wasp, you might need to update your tailwind.config.cjs file to wrap all your paths in the content field with the resolveProjectPath function. source (https://wasp-lang.dev/docs/migrate-from-0-11-to-0-12#migrating-the-tailwind-setup)
4. If you are still facing issues, make sure to restart wasp start. This is sometimes needed to ensure that Wasp picks up the changes and enables Tailwind integration. source (https://wasp-lang.dev/docs/project/css-frameworks#tailwind)
Remember, the Open SaaS template is built with Wasp and already comes with a landing page and blog. As long as you stick with Tailwind, you should be fine. source (https://discord.com/channels/686873244791210014/1204153431019753512)
If you continue to face issues, please provide more specific details about the errors you are encountering.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @arresejo, 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?What did you try? Which kind of errors do you see? Please share as much details as you can.
It is possible, just did it as well - there's actually so much I learned about wasp while doing this -- would recommend doing this is an exercise
That's great! Could you please provide some general guidance of how you manage to do it? 🙂
Having the two attached components below, I simply try to use the button in a page as:
import {Button} from "../client/components/ui/button";
function Example() {
return <Button>Save changes</Button>
}
I'm getting the errors in the attached file.
Thanks for your help!
Ups, I forgot to attach the errors log 🙂
I can't really understand all of your code with this, but I would assume that the Catalyst uses typescript 5.0 instead of the minumum required for Wasp (5.1) hence you get these Typescript errors
TS2694
(TS2559 I think is something else)
If you can as well can you email the creators of Catalyst and ask them to update to Typescript 5.1? I'll do this as well, maybe we'll get more traction. There's a few errors when I integrate the sidebar that I hacked to fix, but it's buggy
Thanks for your answer, I’ll contact the team concerning this. I’ll keep you informed
I joined the discord and made a thread,
https://tailwindui.com/support
It looks like some of the components are outdated, make sure you are using the docs to get these code snippets and not LLMs because that could case mismatches as well 🙂