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

81–90 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#81

Post by qq99 »

SebastianKra wrote: post #72
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…

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?

Re: DaisyUI: Tailwind CSS Components

#82

Post by james2doyle »

nnurmanov wrote: post #64

Are there any cool UI libraries for Svelte or Vue? Similar to Baseweb or Grommet?I am planning to move away from ReactJS some day

There are a boatload for Vue:

https://www.radix-vue.com/ https://vuetifyjs.com/en/ https://www.unaui.com/ https://vuesax.com/ https://primevue.org/ https://inspira-ui.com/ https://www.naiveui.com/

And for Nuxt there is https://ui.nuxt.com/

Re: DaisyUI: Tailwind CSS Components

#83

Post by kylecordes »

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…

Historically, the way to standardize how a component appears with Tailwind is to use component abstraction in whatever tool you are building with to accomplish that. Define a button once somewhere and then throw on whatever classes it needs.

If you were copy-pasting long strings of Tailwind classes all over, you were already doing it wrong before you even heard of Daisy.

Re: DaisyUI: Tailwind CSS Components

#84

Post by qq99 »

mejutoco wrote: post #70
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. I think in most projects people are using some sort of component system outside of tailwind. A react component, for example, could have the tailwindcss classes. Then that component is us…

Yes, they'll typically have a UI component that accepts props and may have some internal state.

DaisyUI is operating at the style layer, so you might use it to achieve the visuals for your UI component (regardless of how you achieve your UI component, be it React/Vue/server-rendered/etc)

I'm suggesting that just because you have a UI component, it doesn't mean you should be sending 30 tailwind classes for this button across the wire (in a server-rendered approach), and DaisyUI is 1 mechanism to achieve this with approximately 1 component CSS class.

Re: DaisyUI: Tailwind CSS Components

#86

Post by gedy »

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, these are webapps and 99% of what we do ends up being the same shit over and over: "here's a button, here's a card", etc and all ends being like what DaisyUI, Bootstrap, etc offers and I'm glad DaisyUI is there to make Tailwind feasible for the people who are hot on it (don't realize it might not be a good fit for what they are doing.)

Re: DaisyUI: Tailwind CSS Components

#87

Post by alfonsodev »

sgt wrote: post #73

For those interested in how to use this with HTMX, read on. DaisyJS supports HTMX as it can work with just plain HTML without needing a fancy JS framework like Vue or React. You start by setting up something that can serve HTML and with a template engine. My favorite is Django. You also need daisyui, tailwindcss etc in a local NodeJS dir. Those parts aren't too hard, I'll skip over it. Now you make sure you build a s…

Totally agree, I do use it with Go lang and echo framework which is very light, I have a very simple vite config to build the css and js, reload everything with air, and it's fast and simple.

Edit: I can't prove it but I think even AI coding is more efficient with this approach, clear server side rendering, plain JS with modern features built with vite and CSS classes.

Re: DaisyUI: Tailwind CSS Components

#88

Post by qq99 »

jug wrote: post #58
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…

But I mean, Tailwind exists to make you quickly prototype and standardize upon a personal look & feel for your site and reuse these styles with components. The standardization/reuse aspect is absolutely part of it.

I think you're agreeing with me. DaisyUI is 1 implementation of a standardization shortcut so you don't have to e.g., develop your own button, dropdown, modal, nav, etc (whatever you are interested to consume from DaisyUI)

Re: DaisyUI: Tailwind CSS Components

#89

Post by pests »

wahnfrieden wrote: post #59
conductr wrote: post #52

Earlier quoted context omitted.

> In a way, using tailwind can be like variablizing your CSS at compile time Isn't this what SCSS or Sass did though? They were around long before tailwind. Is there a reason to pick Tailwind over those? I assume most projects were using them then decided to migrate to tailwind once it became popular, but why did that happen? Was it just keeping up with the cool kids or some actual differentiating features? I still j…

SCSS and Sass don't have a "gap-1"

Then how does tailwind implement it? Use that.

Re: DaisyUI: Tailwind CSS Components

#90

Post by qq99 »

kylecordes wrote: post #83
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…

Historically, the way to standardize how a component appears with Tailwind is to use component abstraction in whatever tool you are building with to accomplish that. Define a button once somewhere and then throw on whatever classes it needs. If you were copy-pasting long strings of Tailwind classes all over, you were already doing it wrong before you even heard of Daisy.

Sure, you might make a `` UI component (assume React), but if it embeds 30 classes in it, when you server-render this, every button on your page is contributing ~30 classes worth of bytes to the payload sent across the wire.
Post reply on HN