Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

DaisyUI: Tailwind CSS Components

daisyui.com

Post reply on HN
Print view View original

111–120 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#111

Post by trevor-e »

gedy wrote: post #86
trevor-e wrote: post #68

I agree with others that this is not how Tailwind is meant to be used. For example, the approach shadcn ( https://ui.shadcn.com/ ) takes is much better IMO. Creating helpers like `btn` makes it very difficult to understand how it works and is not very customizable. Shadcn creates an actual component for you in your codebase and is just trivial Tailwind styles to modify.

> I agree with others that this is not how Tailwind is meant to be used. I mean, whatever it's "meant" to be used like, Tailwind is popular enough that it ends up being used in a lot places where how it's meant to be used is a terrible fit. (Big apps, with existing UI code, can't assume a monolithic technology stack, an actual design system with tokens that is not just a react component library, etc). Ultimately, the…

Yea sure, there are still some spots where I might find DaisyUI helpful, like building a quick internal admin page for something. And another commenter pointed out this works in non-react projects unlike shadcn. But I would know going into it that it will be a pain to customize/maintain, should I ever need to do that. Maybe that's already the expectation for people familiar with Bootstrap though.

My advice is more cautionary for folks who search "Tailwind components library", see DaisyUI as the 4th result, and think "great!"

Re: DaisyUI: Tailwind CSS Components

#112

Post by tshaddox »

Calavar wrote: post #26
sudhirj wrote: post #10

This is a rebuild of the antithesis of Tailwind on Tailwind. Bootstrap had this for decades (Daisy even copies the same semantic class names in some cases). Tailwind was supposed to break away from this, to specific actual styles directly, but looks like we're coming back full circle again. Why not just use Bootstrap?

Tailwind is already a full circle. It is essentially a toolkit for using CSS to emulate the pre-CSS era approach of putting styling info inside attributes on the markup (remember the HTML2 days of bgcolor and cellpadding?).

It's not a full circle, because you don't end up back where you started. Inline styles have many well-known missing features, like pseudo-classes and media queries.

Re: DaisyUI: Tailwind CSS Components

#114

Post by exiguus »

Calavar wrote: post #36
qq99 wrote: post #27

I'm surprised that a lot of the comments seem to be missing the reason that this project exists. In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of…

> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. CSS classes already support this natively. The whole point of CSS was move up a level of abstraction, so you could collect related styles into a class and reference that class everywhere…

Sure, but you want to do this also with your markup and have one source of truth not many.

Re: DaisyUI: Tailwind CSS Components

#115

Post by exiguus »

slightwinder wrote: post #40
qq99 wrote: post #27

I'm surprised that a lot of the comments seem to be missing the reason that this project exists. In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of…

> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Isn't this called classes and Ids in CSS? Is Tailwind just CSS on top of CSS?

The hole point of having a Component-Library is to reuse Components. And a component is markup, style and functionality. Not only the CSS. E.g. you want to use the same Button-Component all over the place in your project and not re-declare text again and again in your project. If you think about more complex Component like a sort able table, it becomes more obvious.

Re: DaisyUI: Tailwind CSS Components

#116

Post by SebastianKra »

qq99 wrote: post #81
SebastianKra wrote: post #72

Earlier quoted context omitted.

That's what components are for. One of the issues with classes is that you inevitably run into a behavior that requires additional dom nodes or js. For example, what if your most of your buttons need to show loading states [^1]. Bootstrap is actually not as bad as I remember, but I still see quite a few examples where their api requires complex & specific combinations of elements. Just compare their Accordion to Shad…

How are you going to style your components, if not via CSS classes?

(I didn't say to not use classes)

Depends on the conventions of the project. Tailwind is acceptable (shadcn is a great starting point), but if I write them from scratch, I use css modules.

You don't write component styles that often so the context switching and repetition don't matter, and css modules are close to the standard while still being locally scoped.

Re: DaisyUI: Tailwind CSS Components

#118

Post by martini333 »

qq99 wrote: post #27

I'm surprised that a lot of the comments seem to be missing the reason that this project exists. In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of…

> copy+paste the same 20+ tailwind classes

No sane developer does this. Where does the Tailwind team or documentation encourage this?

Re: DaisyUI: Tailwind CSS Components

#119

Post by 90s_dev »

cheald wrote: post #55
90s_dev wrote: post #35

Earlier quoted context omitted.

I've been writing CSS manually since it came out. The latest additions make it less difficult, like & and nesting, variables, etc. But overall, CSS is just really difficult to scale well properly. I should probably learn Tailwind at this point, instead of continually rolling my own CSS. So now I have DaisyUI bookmarked since the site is excellent and looks so useful.

I've been writing CSS by hand since the late 90s. I resisted Tailwind for a long time, but I tried it on a pet project and I get it now. It doesn't fundamentally do anything that you can't do in CSS already, but it sort of "quantizes" the DX such that the vast majority of the CSS you'd usually end up writing boils down to a set of conventions. You can still write your own CSS as needed (and probably should, for some…

Right but it comes after a long line of similar CSS frameworks with the same promise, starting with Bootstrap, and there were large movements about 10 years ago of whole orgs deserting those frameworks because of serious issues. Are you saying Tailwind somehow has resolved those? That was the main reason I didn't try to learn it considering it to be just yet another CSS framework's conventions.

Re: DaisyUI: Tailwind CSS Components

#120

Post by Calavar »

foxygen wrote: post #103
Calavar wrote: post #26

Earlier quoted context omitted.

Tailwind is already a full circle. It is essentially a toolkit for using CSS to emulate the pre-CSS era approach of putting styling info inside attributes on the markup (remember the HTML2 days of bgcolor and cellpadding?).

And why is that a bad thing? It might be the case that bgcolor and cellpadding stopped being used because they didn't support media queries for example, not because they were inline styles.

There was a 10 to 15 year gap between people ditching bgcolor and cellpadding for CSS1 and widespread browser support for CSS3 media queries (2011, when IE9 got support and Chrome broke 25% market share). So I strongly disagree that the migration was about media query support.
Post reply on HN