I decided to finally check what DaisyUI is after seeing this post as I mostly work on the backend.
Did they just reinvent bootstrap on top of Tailwind? Isn’t this the exact opposite of what Tailwind advocates?
I decided to finally check what DaisyUI is after seeing this post as I mostly work on the backend.
Did they just reinvent bootstrap on top of Tailwind? Isn’t this the exact opposite of what Tailwind advocates?
Don’t know (or really care) what Tailwind advocates, but using Daisy for a couple years has been a joy, and even if you don’t use any of the provided components (which anyway don’t get included during compilation unless used) it’s great just for the theming capability, so instead of bg-green-500, bg-orange-600
, etc you use bg-primary
, bg-secondary
, etc which gives you not only light/dark themes, but the ability to easily swap colours and themes across your whole website/app (and to provide user-chosen or even user-defined themes).
You can already define custom colors for Tailwind like primary, secondary, or anything else.
$ grep surf tailwind.config.js
surf: '#006DA3',
The real benefit of DaisyUI is that it offers ready-baked components for most situations.
opposite to what? the ui kit the tailwind team sells?
If it helps, this is discussed in the Daisy docs as well: Introduction — Tailwind CSS Components ( version 5 update is here )
This shows my ignorance regarding frontend. I didn’t know such thing exist tbh.
Why use this over a regular css framework that doesn’t require preprocessing?
Yes, the tailwind creator has said before that he regrets including @apply
(which is what DaisyUI is built on):
I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no
@apply
!The behavior is outrageously complicated, everyone struggles to build the right mental model of what it’s supposed to do, and it encourages bad CSS architecture.
I’m a backend dev, and I’m not too deep into UI frameworks… but as I understand, tailwind relates to the atomic web design. all css that needs to exist, lives in the atoms, tailwind provide atoms and a few molecules for you to use. ui toolkits based on tailwind (there are several of those, include the one from the tailwind team that i linked before) goes from molecules to templates but using the atoms provided by tailwind.
as I understand this is particular helpful to avoid leaking css and weird composition between css elements that are complex to track and debug.