MargaUI: A No-Build, Native Tailwind 4 Port of DaisyUI - Mariano Guerra's Log

Today marks the first release of MargaUI, a port of daisyUI from a Tailwind 3 "legacy" plugin to a Tailwind 4 "native" set of components.

The initial motivation for the port was the need to have a rich set of components on top of Tailwind that could be compiled in the browser for

With the release of Claude Opus 4.5 I felt I could do it better, I also wanted to see how far I could automate/delegate the migration to the agent by setting up a good "harness" and feedback loops. The results are this release and some improved understanding of Tailwind/daisyUI and agentic coding.

Here's how you use it in the browser:

<style id="margaui"></style>
<script type="module">
  import { compile } from "./margaui.js";
  const css = await compile(["btn", "btn-primary", "badge"]);
  document.getElementById("margaui").textContent = css;
</script>

While my main motivation for the port is to run it in live coding environments it can also be used as a replacement for daisyUI using the Tailwind CLI:

npx @tailwindcss/cli -i entry.css -o style.css

Read more about it in the project's README.md

I also published the

• Component examples

• HTML

• Generated CSS with size information and how long it took to generate

With a theme switcher to preview examples on different themes.

Component playground with Synthwave theme

On each example you can click the edit link to go to the MargaUI Editor where you can live code HTML and see the results as you type.

Live editor with sunset theme

The remaining work is to keep polishing the components' style where the migration "broke" some stuff, mostly around dark themes, but the big part of the migration is already done.

The project has the same license as Tailwind and daisyUI and I would be happy if the daisyUI community would like to take something out of this project.

On my side, I will keep improving it for my needs and make it a part of the puzzle in the VibeCard project. More announcements soon ;)

to get updates in Reader, RSS, or via Bluesky Feed