How to get DaisyUI and Phoenix to work?

Hey @kingdomcoder, I’m sorry you’ve had a frustrating experience. While I have not used DaisyUI myself, I imagine others who want to help would find it easier if you described what made this hard for you, or what problems you ran into that require help.

I have used it a bunch, and also deployed to Fly. My guess is the change you need to do in the Dockerfile.

# note: if your project uses a tool like https://purgecss.com/,
# which customizes asset compilation based on what it finds in
# your Elixir templates, you will need to move the asset compilation
# step down so that `lib` is available.

Or is it something else?

Thank you @benwilson512 .

Here’s a summary of my situation:

1. I’m trying to use DaisyUI in a Phoenix 1.6 app.
2. I need to add DaisyUI as a required Tailwind plugin in the tailwind.config.js file
3. As per, GitHub - phoenixframework/tailwind: An installer for tailwind · GitHub, the Elixir installer for tailwind does not cater for external plugins:

Note : The stand-alone Tailwind client bundles first-class tailwind packages within the precompiled executable. For third-party Tailwind plugin support, the node package must be used.

PS: I suggest this should be stated clearly at the top of the README rather than as a bottom comment. I already submitted a PR for this.

4. I’m trying to build my assets in production, not at compile time.
5. The recommended tailwind nodejs installation instructions help with a local workaround. Trying to deploy the app (to Fly.io in my case) with its nodejs installations is another hurdle (think Docker). The guides I found focus on assets bundled using esbuild.

Eventually, I had to choose between following this workaround, using a CDN or precompiling my assets and excluding the output folder from gitignore.

(There was also the side issue of my site not looking the same in production when I followed this workaround.)

So,

1. I wish to understand why the Tailwind Hex package does not allow external plugins, especially DasiyUI seeing how widespread it is. I’d want to know if this is permanent or it will be resolved in future versions (and how I can contribute)
2. It would be great if more information was available on integrating DaisyUI with Phoenix

I think you need esbuild as well as the Tailwind library.

This didn’t work when I tried it.

My require("daisyui") code was flagged.

But since you have used this successfully, is there an open/barebones sample app you can point me to?

You can generate a Tailwind boilerplate here:

I havent implemented the Tailwind cli (yet) but its basically just to follow these steps:

Finding the article you referred to gave me the missing piece.

Here are the relevant steps. I assume you have a Phoenix app setup and npm installed on you device.

1. Install and setup the Elixir Tailwind library. The README of the library is a great resource.
2. Publish your app to fly using flyctl. This post is a great guide. Just note that the fly commands in the post might need to be replaced with flyctl commands.
3. On your local machine, cd into your project’s assets folder and run npm init.
4. From within your assets folder, follow the DaisyUI installation steps.
5. Update the Dockerfile generated during the early fly.io deployment. Perform the following
   a. Ensure the COPY lib lib command comes before the RUN mix assets.deploy commnd
   b. Include this command RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error in the Dockerfile. This should also come before the RUN mix assets.deploy command

Expectedly, you should be good to go and your app should properly deploy to fly.io

Thanks - running npm init (at least locally) is the step I missed - now it works well. I am still getting the point where I want to try Fly.io - glad you’ve written these steps!

Thanks for the information. I have got tailwind and daisyui running on localhost and deploy on fly.io.

I am trying to add a tailwind custom.css. How do I go about it. I’d be grateful if you could offer some tips.