daisyUI

[rubydesign]

So this looks like great work. It's been a while since i had the choices that come from setting up a new app, and tailwind with this webpacker free experience seems the way to go.

Alas, i am a one man show and don't want to write css from the start. But like the idea of tweaking later, grabbing compatible snippets and later on maybe even ditching daisy.
Not that i am (yet) married to daisy, i just want a head start (with a component framework).

I am surprised the question has not come up, ie how to do daisyUI with this gem. I fear one can't at the moment, but i also don't see if it could be made to.

Failing that, another framework? Or a mention in the readme.

[dhh]

As far as I can see, daisyUI just uses TW directly. Does not require any additional dependencies. So you can just copy/paste the daisyUI component HTML, and it'll work.

[rubydesign]

Thanks for the quick answer, i guess. But this is not resolved. And i am not sure what you mean by "uses tw directly". But i could have been clearer and not assumed that daisy was a known thing.

daisyUI defines classes that are used. Those classes are off course defined in terms off tailwind classes. But daisy is more on the bootstrap / component level and so the css needed is much less.

To get the daisy css definitions, there is an npm install needed, and then a require in the tailwind config. See https://daisyui.com/docs/install/
(There is a cdn option, which is about as usefull as using tailwind via cdn)

Just adding the require into the tailwind.config.js throws an error as the daisyUI is not installed (via npm).
But as this gem does not need npm the question is really how/ if this is possible.

Exact steps / expectations

• create new app with tailwind: rails new --css=tailwind TailwindTest
• In the app create test : ./bin/rails g controller test index
• edit tailwind.config.js to include plugin require("daisyui"),
• edit the app/views/test/index to contain <button class="btn">Daisy</button>
• run ./bin/dev

Expect
test/index to contain button

Result
Server does not start with
code: 'MODULE_NOT_FOUND',

Note

I have seen the setup for daisyUI done with js/css-bundling gems. And i managed to reproduce the necessary steps. Before i found this gem, and the hope kindled of getting rid of the js ecosysstem as i think you called in in the *Alpha preview: Modern JavaScript in Rails 7 without Webpack . So that is the dream i am dreaming, no esbuild, however fast it may be.

*https://www.youtube.com/watch?v=PtxZvFnL2i0

[dhh]

Ah, I see. I thought these components were just using TW classes directly. Not defining their own.

Anyway, there's no path for this to work with this setup. You'll need to use TW together with jsbundling-rails and a complete node setup.

[rozhok]

For people who came here from search engines, here is the solution:
just install daisyui npm package into your app dir and then add require("daisyui") to the tailwind.config.js as described in the DaisiUI docs.

Everything will work smoothly.

Yes, you will need additional npm install step as a part of your build process, but you don't need any node tools to compile css. Tailwind binary will handle it.

I think you can even vendor this dependency and not rely on node at all, but I haven't tried it.

[coderberry]

For people who came here from search engines, here is the solution:

@rozhok Thanks for providing this solution. I am finding that the animations for components are still not functional. Were you able to get them working properly (e.g. toggle button animations on click)

[rozhok]

@coderberry no, toggle animation does not work for me also.

[mariochavez]

Hi!
I made it work by downloading the CDN version of Daisy UI and put it into my stylesheets folder.
Then I imported as follows:

@import "tailwindcss/base";

@import "./daisyui.css";

@import "tailwindcss/components";
@import "tailwindcss/utilities";

Opened the daisyui.css file and added the at the top:

@layer components {
  ... Original Daisy UI CSS.
}

With this, tailwindcss-rails purge the unused CSS from DaisyUI CSS.