Use TailwindBundle with plugins

[JuGid]

I am trying to use DaisyUI as a Tailwind plugin so I have a tailwind config file like this :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

But, after re-build, this doesn't work as expected since the page does not load the daisyUI css. Do I have to add something to the importmap ? I have installed DaisyUI as described here : https://daisyui.com/docs/install/

Also, when using TailwindUI free components like the navbar, the dropdowns stay open and I can't click to close them. Don't know if it's a related issue.

EDIT : This is my output when php bin/console tailwind:build

 Command:
    '/XXXX/var/tailwind/v3.4.13/tailwindcss-macos-x64' '-c' '/XXXX/tailwind.config.js' '-i' '/XXXX/assets/styles/app.css' '-o' '/XXXX/var/tailwind/app.built.css'

Rebuilding...

🌼   daisyUI 4.12.13
├─ ✔︎ 2 themes added             https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:   https://opencollective.com/daisyui

Done in 995ms.

[JuGid]

I found the solution digging the internet to use DaisyUI CSS. Btw, this is the full solution I found :

1. Run npm i -D daisyui@latest
2. Modify your tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
   content: [
   "./assets/**/*.js",
   "./templates/**/*.html.twig",
   "./node_modules/daisyui/**/*.js" // ADD THIS
   ],
   theme: {
   extend: {},
   },
   plugins: [
   require('daisyui'), // AND THIS
   ],
   }

3. Run php bin/console importmap:require daisyui
4. Optionally (?) : Run php bin/console asset-map:compile
5. Then run php bin/console tailwind:build (with or without -w)

You're ready to go !

If you use themes, don't forget to run php bin/console asset-map:compile

EDIT : This is the solution.

[bocharsky-bw]

Hey @JuGid

Thanks for sharing your solution regarding DaisyUI with others! I personally haven't used DaisyUI before, so can't say much. But seems their installation docs are not complete? I don't see they mention adding "./node_modules/daisyui/**/*.js" in their https://daisyui.com/docs/install/ . Or probably that needed only for additional features (not all) so you had to add it in your specific case.

Anyway, as I see we can close this issue now, right? Also, if you see the ways to improve the docs here: https://symfony.com/bundles/TailwindBundle/current/index.html - please, feel free to create a PR and we will discuss it :)

[JuGid]

Hey,

I'm sorry, I made an edit (which is not clear) that say :

EDIT : DaisyUI themes are not working when using the tailwind.config.js. That's really weird. Did I miss something ? And things like bg-primary is not working too

Please, donc close this issue since I have installed DaisyUI but some functionalities don't work 🥲

I will make some improvements to the documentation in the future but it's already great enough !

[bocharsky-bw]

For the themes, I think you may need to add more configuration according to their docs: https://daisyui.com/docs/themes/

I hope that helps

[JuGid]

I'm so hyper stupid on this...

I made two stupid errors :

1. In the tailwind configuration file, I wrote "theme" without "s", so it's not a valid configuration ("themes" is valid)
2. I put the data-theme attribute on my "head" not on my "html", so how can DaisyUI apply a theme on "head" 🥲

Btw, the solution I gave before is the good one. I'm going to pay for the help, can I create a specific help for daisyUI or this issue is enough ? You can close this issue.

[bocharsky-bw]

Hey @JuGid ,

No problem, I'm happy to hear you solved the problem yourself and thanks for sharing the actual solution with others 👍

This issue will definitely help others with similar problems I think, but feel free to create a PR if you see any improvements in the bundle's docs. :)

Cheers!