Click To Skip To Main Content
 
Return to blog

How to Use daisyUI in Your Elixir + Phoenix Project

Learn about daisyUI, and how you can add it to your Phoenix project with just a couple easy lines of code.

Created 2023-07-29. Modified 2024-04-06.

Example code written using Phoenix v1.7.7

Table Of Contents

  1. Introduction
  2. How to Set Up daisyUI
  3. Add Your First daisyUI Component
  4. A Couple Small Changes That Will Make Your Life Easier
 

Introduction

daisyUI is a CSS framework built on top of Tailwind CSS. daisyUI can be thought of as similiar to Bootstrap, but for Tailwind. It provides a set of ready-made, customizable components for you to use in your projects, and covers a wide variety of use cases. That means you can spend less time fiddling with CSS and Tailwind, and more time developing your project!

One of the main benefits of daisyUI is that it allows you to use semantic names for components, instead of the 'tag soup' that is commonly associated with Tailwind CSS. That means that entire lines of Tailwind classes can often be replaced with one or two daisyUI classes (and modified with additional Tailwind classes as needed).

daisyUI vs. Tailwind

Here is an example of button made with vanilla Tailwind:

<button
  class="bg-blue-600 px-4 py-3 text-center text-sm font-semibold inline-block
         text-white cursor-pointer uppercase transition duration-200 ease-in-out
         rounded-md hover:bg-blue-600 focus-visible:outline-none
         focus-visible:ring-2 focus-visible:ring-blue-600
         focus-visible:ring-offset-2 active:scale-95"
>
  Tailwind Button
</button>

Here is a similar button made with daisyUI:

<button class="btn btn-primary">daisyUI Button</button>

As you can see, having a set of ready-to-use components makes the HTML markup a lot cleaner and can help you save a lot of time.

Plus, since daisyUI is built on Tailwind, that means you have all the flexibility of Tailwind at your fingertips if you want to extend the built-in daisyUI components. Simply add the desired Tailwind classes to your HTML markup as needed, and you're good to go! For example:

<button class="btn btn-primary active:px-12 transition-all duration-300">
  daisyUI Button
</button>

Other Features/Benefits

Another feature of daisyUI is that it is a CSS-only framework. That means it can be used with any web development platform, whether it is vanilla JS, React, Vue, Svelte, etc.

Also, because Phoenix provides first-class support for Tailwind CSS out-of-the-box, that means you can integrate daisyUI with a couple commands, and just a single line in a config file.

One thing to keep in mind: The purely CSS-based nature of daisyUI means that it does not come with a built-in Javascript module. For example, to toggle a modal, you will add/remove the CSS classes yourself, either with checkbox hacks (described in the daisyUI docs), or by adding your own project-specific Javascript. Compared to something like Bootstrap, which offers built-in Javascript functionality, using daisyUI often requires you to manually implement some features that are available out-of-the-box when using other CSS frameworks. Its CSS-only model often leaves the implementation details up to you. This can be a blessing or a curse depending on the scenario. Personally, I find that the tradeoffs are worth the benefits that I gain by using daisyUI.

 

How to Set Up daisyUI

This process is short and simple, so we'll start from the ground up.

  • Ensure that you have installed Elixir, Phoenix, and npm.

  • Open your terminal, navigate to your preferred directory, and create a new Phoenix project:

    • mix phx.new your_project

  • Navigate to the assets/ directory in your newly-created project:

    • cd assets/

  • Initialize an npm project in the assets/ directory:

    • npm init -y

  • Add npm dependency daisyui in the assets/ directory:

    • npm i -D daisyui@latest

  • Add daisyUI to Tailwind plugins list (in assets/tailwind.config.js):

  plugins: [
+   require('daisyui'),
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    // ...
  ]

daisyUI is now installed!

 

Add Your First daisyUI Component

Let's make sure the Phoenix development server is up and running so we can try it out.

To start your Phoenix development server, navigate to the project root directory and run this command:

  • mix setup && mix phx.server

Open your browser and navigate to localhost:4000, and you should see the homepage that was generated when you created your Phoenix project. (It should say "Peace of mind from prototype to production.".)

Let's modify this homepage so that it includes an example daisyUI component:

lib/your_project_web/controllers/page_html/home.html.heex

    <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
      Phoenix Framework
      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
        v<%= Application.spec(:phoenix, :vsn) %>
      </small>
    </h1>

+   <div class="btn btn-lg btn-success">
+     Hello daisyUI!
+   </div>

    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
      Peace of mind from prototype to production.
    </p>

Thanks to Phoenix's automatic hot-reload feature, you should see the changes immediately when you save the page. With any luck, you'll see a button that looks like this:

 

A Couple Small Changes That Will Make Your Life Easier

Before we finish, there's a couple extra steps you'll probably want to take. Don't worry: they're quick and easy.

1. Remove the default Tailwind forms plugin to avoid conflicts with daisyUI form components

The default Tailwind forms package will cause conflicts with the daisyUI form components. Let's get rid of it:

assets/tailwind.config.js

  plugins: [
    require("daisyui"),
-   require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
  // ...
  ]

2. Prevent daisyUI from spamming the console when tailwind.config.js is modified

By default, daisyUI will print a message like this to the console whenever tailwind.config.js is modified:

🌼 daisyUI 3.5.0 https://daisyui.com
╰╮
 ╰─ ✔︎ [ 2 ] themes are enabled. You can add more themes or make your own theme:
      https://daisyui.com/docs/themes

    ❤︎ Support daisyUI: https://opencollective.com/daisyui

That's annoying. Let's disable that:

assets/tailwind.config.js

module.exports = {
   content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
+  daisyui: {
+    logs: false,
+  },
   plugins:  [

Congratulations! At this point, you can do a git commit, then go take a look at the daisyUI components library.

I hope you enjoy using daisyUI!

This blog post is licensed under CC-BY 4.0. Feel free to share and reuse the content as you please. Please provide attribution by linking back to this post.

Return to blog