Chakra UI+tailwind

Is it possible to use chakra ui on front?

3 Replies

Hi @Petar Vukovic. 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 use Chakra UI in a Wasp project. In a Discord support thread (https://discord.com/channels/686873244791210014/1204418933927448657), community members have mentioned having success with Chakra UI. However, the specific steps to integrate Chakra UI with Wasp are not detailed in the provided knowledge sources. As for Tailwind, Wasp does support it. There are workarounds to use Tailwind CSS in a Wasp project, as mentioned in a Github issue (https://github.com/wasp-lang/wasp/issues/560). One way is to use the CDN as a workaround. Another way is to run the tailwindcss command next to wasp start and ensure it targets CSS files from the generated code and then again generates them into the generated code. However, this method is considered hacky and complicated. Please note that using both Chakra UI and Tailwind CSS together might not be straightforward, as they both provide their own set of utility classes and components. You might need to configure them properly to avoid conflicts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Petar Vukovic, 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•2mo ago

@kapa.ai There is no need for workarounds for Tailwind to work: https://wasp-lang.dev/docs/project/css-frameworks

CSS Frameworks | Wasp

Tailwind

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're correct, Wasp now supports Tailwind CSS directly, without the need for workarounds. Here are the steps to enable Tailwind CSS in your Wasp project: 1. Add two config files — tailwind.config.cjs and postcss.config.cjs — to the root directory of your project. 2. With these files present, Wasp installs the necessary dependencies and copies your configuration to the generated project. 3. You can then use Tailwind CSS directives in your CSS and Tailwind classes on your React components. Here's an example of how your project structure should look:

.  
├── main.wasp  
├── package.json  
├── src  
│   ├── Main.css  
│   ├── MainPage.jsx  
│   ├── vite-env.d.ts  
│   └── waspLogo.png  
├── public  
├── tsconfig.json  
├── vite.config.ts  
├── postcss.config.cjs  
└── tailwind.config.cjs

.  
├── main.wasp  
├── package.json  
├── src  
│   ├── Main.css  
│   ├── MainPage.jsx  
│   ├── vite-env.d.ts  
│   └── waspLogo.png  
├── public  
├── tsconfig.json  
├── vite.config.ts  
├── postcss.config.cjs  
└── tailwind.config.cjs

If Tailwind is not working after adding the required config files, make sure to restart wasp start. This is sometimes needed to ensure that Wasp picks up the changes and enables Tailwind integration. For more details, please refer to the official Wasp documentation (https://wasp-lang.dev/docs/project/css-frameworks#tailwind). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, 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?

Gaming

Programming

Chakra UI+tailwind