Use daisyUI with HTMX

How to install and use daisyUI with HTMX

This guide uses daisyUI as a Node.js dependency. If you don't want to use Node.js, try theCDN version of daisyUI.

Initialize a new Node project in the current directory usingnpm init -yif it's not a Node project already.

Install Tailwind CSS CLI and daisyUI

Terminal

npm install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

Add Tailwind CSS and daisyUI to your CSS file.
Address your HTML and other markup files in thesourcefunction.

app.css

@import "tailwindcss" source(none);
@source "./public/*.{html,js}";
@plugin "daisyui";

Add a script to your package.json to build the CSS.

package.json

{
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i app.css -o public/output.css"
  },
}

Run the script to build the CSS file

Terminal

npm run build:css

This command creates apublic/output.cssfile with the compiled CSS. You can link this file to your HTML file.

public/index.html

<link href="./output.css" rel="stylesheet">

Now you can use daisyUI class names!

Do you have a question? Ask on GitHub or Discord server

Do you like daisyUI? Post about it!

Support daisyUI's development: Open Collective

NEXUS
Official daisyUI Dashboard Template