Live data from Hacker News

DaisyUI: Tailwind CSS Components

daisyui.com

21–30 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#21

I don't really use Tailwind. I enjoy my (S)CSS. I took a look at https://daisyui.com/components/button/ and immediately I see classes that look similar to Bootstrap. So my question is: Why build components on top of something like Tailwind instead of just regular CSS? Or are you able to customize and use Tailwind mixed in with the components? Then sure why not I guess. Otherwise it feels like going full circle here.

You can use mixed in tailwind. Its for consistency (which I quite like). I'm a big fan of just saying "gap-1" and knowing that that will be consistent across the custom components I've written, and the component library

Re: DaisyUI: Tailwind CSS Components

#22
I used DaisyUI for a recent project and really enjoyed it. It definitely isn't "Bootstrap for Tailwind". While it does have some semantic class names like bootstrap, it's very few comparatively. It does have a semantic palette (customizable), but this is integrated with tailwind, so all your tailwind utility classes share the palette.

It also has some unstyled or lightly-styled components (modal, dropdown, etc). These are just like using headless UI, but with less JavaScript. These also work well with the Tailwind utility classes to let you customize the actual display.

Re: DaisyUI: Tailwind CSS Components

#24

I don't really use Tailwind. I enjoy my (S)CSS. I took a look at https://daisyui.com/components/button/ and immediately I see classes that look similar to Bootstrap. So my question is: Why build components on top of something like Tailwind instead of just regular CSS? Or are you able to customize and use Tailwind mixed in with the components? Then sure why not I guess. Otherwise it feels like going full circle here.

Yes, everything can be overridden with Tailwind classes (i.e. `btn p-8`). It's a great choice you're a Tailwind enjoyer, but want the batteries-included experience of Bootstrap.

Re: DaisyUI: Tailwind CSS Components

#25

Tailwind has the Bootstrap problem, in that I can tell straight away that a website uses Tailwind, and for some reason that is off putting.

You might be bored by the aesthetics, but isn't usability improved by having familiar with UI components across websites?

Re: DaisyUI: Tailwind CSS Components

#26
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?).

Re: DaisyUI: Tailwind CSS Components

#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 course you can. Or you can use the btn from DaisyUI.

I think DaisyUI is just a shortcut for many common UI components that you will inevitably want to build out and that you will necessarily eventually standardize in any app that grows large enough.

How does it differ from bootstrap? Well, you can continue to use tailwind for everything else that DaisyUI has not implemented. It's just an additive layer to tailwind. The project is at its core just a shortcut for common UI components.

As a user, my criticism is that many of the DaisyUI components seem to be lacking good contrast, so some just don't seem to be usable. The theming situation is really interesting and quite cool to use, but if you look at the example page, it just feels hard to read. I can't really find a light and dark default theme that look good to me (re: contrast and brightness). I think the color hooks might just not be there but I didn't dig far enough in.

For me, I've found a lot of value in being able to easily copy+paste parts of DaisyUI source code, e.g., a particular widget and modifying it to fit my design system, rather than use it in its entirety.

Re: DaisyUI: Tailwind CSS Components

#30
Not entirely convinced about their graphs where they "improve" over tailwind with just HTML size and "number of class names". Why do these matter exactly? You're basically removing the number of classes in the HTML and adding the CSS anyways so how much are you really saving here?

I don't mind the existence of this library obviously but condensing into tiny abbreviated classes seems like the antithesis of tailwind but maybe it's for folks who can't or don't want to define a base button component every time and want a jumping off point. In that case I'd much rather use shadcn or something based on react-aria that gives me solid primitives that I can extend with tailwind classes passed to it in specific instances

Post reply on HN