Wasp•2mo ago

I cant get daisyui to work

Wasp version 0.16.4 Linux

6 Replies

kapa.ai•2mo ago

Hi @Zoomi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain specific information about getting DaisyUI to work with Wasp, especially for version 0.16.4. There is a related issue where a user tried to use DaisyUI with Tailwind in Wasp (on an older version), but it did not provide a confirmed solution or troubleshooting steps for DaisyUI specifically. The setup involved adding DaisyUI as a plugin in the Tailwind config, but the user reported that Tailwind classes were not being applied, and no resolution was documented in the source provided Tailwind not working. If you are following the standard Tailwind integration steps and adding DaisyUI as a plugin, but it's not working, the knowledge sources do not provide further troubleshooting steps or confirmation that DaisyUI is supported or known to work with Wasp. You may want to check for updates in the official Wasp documentation or community channels for more recent guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zoomi, 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?

ZoomiOP•2mo ago

@kapa.ai Any Idea how to fix this now?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, here are the key steps and checks for getting DaisyUI to work with Wasp and Tailwind: 1. Ensure Tailwind is Set Up Correctly
- Your tailwind.config.cjs should use the .cjs extension and wrap all paths in the content array with resolveProjectPath:

     const { resolveProjectPath } = require('wasp/dev')

     /** @type {import('tailwindcss').Config} */
     module.exports = {
       content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
       theme: { extend: {} },
       plugins: [require('daisyui')],
     }

     const { resolveProjectPath } = require('wasp/dev')

     /** @type {import('tailwindcss').Config} */
     module.exports = {
       content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
       theme: { extend: {} },
       plugins: [require('daisyui')],
     }

- Your postcss.config.cjs should look like:

     module.exports = {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       },
     }

     module.exports = {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       },
     }

- Make sure you have imported your CSS file (e.g., Main.css) with Tailwind directives into your main page/component:

     @tailwind base;
     @tailwind components;
     @tailwind utilities;

     @tailwind base;
     @tailwind components;
     @tailwind utilities;

And import it in your main React file:

     import './Main.css'

     import './Main.css'

- If you miss this import, Tailwind (and DaisyUI) styles will not be applied Tailwind not working. 2. Restart the Wasp Dev Server
- After adding or changing config files, you must restart wasp start for changes to take effect Tailwind. 3. Check for Errors in the Console
- If you see errors related to DaisyUI or Tailwind, double-check your config files and ensure all dependencies are installed. 4. Directory Structure
- Your project root should contain tailwind.config.cjs, postcss.config.cjs, and your CSS file should be in src/ Tailwind. If you have followed all these steps and DaisyUI is still not working, the knowledge sources do not provide further troubleshooting steps or confirm DaisyUI compatibility with Wasp 0.16.4. There may be an unresolved compatibility issue. If you need more help, consider sharing your config files and directory structure in the Wasp Discord or GitHub discussions, as others may have encountered and solved this issue. Summary:
- Double-check your config files and imports. - Restart the dev server after changes. - Ensure all dependencies are installed. - If it still doesn't work, the knowledge sources do not provide a confirmed solution for DaisyUI with Wasp 0.16.4. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zoomi, 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?

Carlos•2mo ago

@Zoomi DaisyUI requires Tailwind right?

# Wasp requires you to have Tailwind ^3.2.7 written in your package.json, you
# must explicitly install it.
npm install -D tailwindcss@3.2.7

# Wasp requires you to have Tailwind ^3.2.7 written in your package.json, you
# must explicitly install it.
npm install -D tailwindcss@3.2.7

ZoomiOP•2mo ago

Yes. Tailwind is actually installed. The odd thing is that tailwind is working and i can apply tailwind styling. However, daisyui styling (for example: btn btn-primary) does not work. Do you have any other idea why it might not work? I found the issue. It was a dumb version missmatch between tailwind and daisyui (i used v5 instead of V4) @Carlos Thank you for helping me out!

Carlos•2mo ago

Happy to hear it was resolved!

Gaming

Programming

I cant get daisyui to work

Did you find this page helpful?