HTMX UI library

Build HTMX UI with Tailwind CSS and daisyUI

HTMX UI needs good HTML, not a component runtime

HTMX works by adding behavior to HTML. That makes the choice of UI library important. If the library expects a JavaScript component tree, it works against the reason you picked HTMX.

Server-rendered fragments need styling that survives swaps. They also need classes that read well beside hx-get, hx-post, hx-target, and hx-swap. A pile of utility classes can become noisy in templates that already carry interaction attributes.

Old CSS libraries can be worse. They bring global styles, dated form controls, and JavaScript plugins that don't understand HTMX swaps.

HTMX + Tailwind CSS + daisyUI

Tailwind CSS gives you control. daisyUI adds higher-level classes that sit neatly beside HTMX attributes.

• HTML-first styling: Write class="btn btn-primary" next to hx-post without introducing a component framework.

• Safe with fragment swaps: daisyUI doesn't bind JavaScript to DOM nodes, so HTMX can replace HTML freely.

• Useful server-rendered components: Forms, alerts, tables, cards, modals, and menus cover many HTMX screens.

• Themes from server state: Return a layout or fragment with a different theme attribute and let CSS update the UI.

HTMX handles interaction through HTML. daisyUI keeps that HTML readable and styled.

Install Tailwind CSS and daisyUI for HTMX

The HTMX guide uses Tailwind CSS CLI and daisyUI as Node dependencies. Add @import "tailwindcss" and @plugin "daisyui" to your CSS file, build it, and link the generated CSS from your HTML.

For the exact commands, see How to install daisyUI with HTMX.