My Journey to build daisyUI: Why Tailwind CSS was not enough?

My Journey to build daisyUI: Why Tailwind CSS was not enough?(daisyui.com)

54 points by Matrixik 2 years ago | 16 comments

rcarr 2 years ago |

If I remember right, the design philosophy around why Tailwind encourages you to write all the different classes out individually each time is that it wants you to reuse components rather than CSS classes because as the codebase scales and gets more complex you now know that any changes are only going to affect that component and not that component + whatever dev decided to use that custom class you made somewhere else. The other issue it solves is loads of devs making custom classes that are almost identical and cluttering up the codebase. If you're working on personal projects and know you're only ever going to need to change those three things about buttons then this is probably a great thing to use but be aware that if you're creating a commercial project and may have lots of people working on it, this is probably not the way to to go. I will see if I can find the exact part of the tailscale docs where they go into this and update this comment with the link later.

Edit: The core concepts section is worth a read in it's entirety but I believe this is the relative part:

https://tailwindcss.com/docs/reusing-styles#avoiding-prematu...

phatskat 2 years ago | |

We’re moving to Tailwind in a project rearchitecture initiative next year and I’m _thrilled_. We have SASS files, and a lot of them. They are mostly well-organized (ish) and, at one point, they were well-maintained.

But, this component needs a little more padding here and not there. We need flexbox - which parts? Some. Some here, some there, but not all of it…yet. What about grids? Sure, maybe, how? Media queries spread all over the place wrapping things arbitrarily. Oh! And scoped styles every which way for that component-specific flair!

Our component class declarations are about to get a lot more verbose, and I’m all for it. I’d much rather see that, and know what the visual structure should be, instead of tracing a class back through mountains of tacked-on SCSS to add a child class that gets applied in one place that makes a thing have zero margin.

pankajparashar 2 years ago | |

If you want to deep dive more into this css methodology, you should check out this interview with ThierryK. https://css-tricks.com/thierry-koblentz-atomic-css/

danielhep 2 years ago |

This looks like a very good project. I am setting up for a new project and I was planning on using ShadcnUI for it, but after reading this blog post I'm interested in trying Daisy. I like the way it's structured for customizability. Does anyone have any thoughts on using this vs Shadcn?

emaclean03 2 years ago | |

I don't personally have any thoughts on ShadcnUI (I've really never heard of it), but I did use DaisyUI when it first launched (v1 or so?). I personally like the way Daisy is thought out, and structured. I also recently started a new project, and I'm integrating DaisyUI again after reading this blog post as well!

euos 2 years ago | |

Using Daisy UI, great project. Some minor annoyances because it does not have JS. E.g. some popups don’t close when you click on the button they are tied to because they are open based on button focus…

jmaker 2 years ago |

A wonderful UX on my mobile device. I personally am fond of Microsoft’s Fluent UI, but I can’t get their websites to work in Safari—either it doesn’t render anything (Blazor) or it manages to render but it’s just not mobile ready (React). That’s a show stopper concern for any UI library. Nevertheless I made a couple of mock-ups for which I solved those rendering issues, which later went in production. But I must say, that Daisy UI site is amazing and just a true eye candy. I think I’ll try it for my blog, it’s been long overdue to refresh the UI.

JaDogg 2 years ago |

Hello, thank you for this. I recently got PR(s) to add astro/tailwind/daisyui to yakshalang.github.io from 2 devs. I'm blown away from how good the website looks now. :) Happily deleted my homegrown and badly written CSS.

pcthrowaway 2 years ago | |

I love seeing open source success stories like this. Not only did someone take the time to refactor the website and make a very exhaustive PR (https://github.com/YakshaLang/yakshalang.github.io/pull/4), you as the maintainer showed a willingness to scrap your own work (project maintainers are sometimes too reluctant to discard significant original work of theirs)

I'm curious if this was all done on github, or if you and the PR submitter discussed the cleanup via other channels before they just blazed ahead with the refactor

JaDogg 2 years ago | | |

We discussed this on discord :)

moi2388 2 years ago |

I’m not surprised tailwind was not enough. If you use tailwind you’ve decided css or scss was not enough, meaning probably nothing will ever be enough for you.

Those unable to walk will always trade in their crutches for wheelchairs.

joshmanders 2 years ago | |

> If you use tailwind you’ve decided css or scss was not enough, meaning probably nothing will ever be enough for you.

That's not true at all. I have been one of the earliest adopters of Tailwind and it is 100% enough for me and has been for 5 years.

Hammershaft 2 years ago | |

CSS is genuinely an awful layout system.

I could rant, but I'll just link Casey Muratori's take on CSS instead. https://feeds.resonaterecordings.com/software-unscripted

savanaly 2 years ago |

I use daisyUI for my side project and it is fantastic! Many thanks to the creator for their hard work.

recroad 2 years ago |

Been using DaisyUI for a year. Highly recommend - it’s opinionated just to the right level

siduck 2 years ago |

unocss!