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

71–80 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#71

Post by adenta »

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.

The problem I have with shad is that it’s react based, not HTML based.

So if I want to use shad, I can’t mix and match static HTML partials in with app code. To maintain a consistent theme, I would need to make literally everything react.

Re: DaisyUI: Tailwind CSS Components

#72

Post by SebastianKra »

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 ShadCN's.

For simple buttons you may get away with classes only (not worth the risk imo), but anything more complex than a dropdown should be a component. Case in point: daisyUIs dropdown doesn't support arrow key navigation or escape.

[^1]: https://www.radix-ui.com/themes/docs/components/button#loadi...

Re: DaisyUI: Tailwind CSS Components

#73

Post by sgt »

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 solid base.html with HTMX bits added. HTMX will fetch content from the Django views.

Now if you were using plain Tailwind you'd probably need to use something like django_components to basically make reusable components instead of using HTML. Not with DaisyJS as it simplifies Tailwind vastly; now you can just use and so on, and you get great looking components.

Also use template inheritance and includes, which are basic concepts in Django.

All in all this is a really clean solution that builds future proof apps without a messy JS framework and and SPA that you most likely don't need.

Anyway I'm a big fan of this approach. I get that people have issues with Tailwind itself but one should rather just consider it as a layer of abstraction that we're now skipping.

Re: DaisyUI: Tailwind CSS Components

#74

Post by metalliqaz »

mbb70 wrote: post #41
fbn79 wrote: post #18

Earlier quoted context omitted.

“Do not remove a fence until you know why it was put up.”

Off topic, but is there a term for the opposite concept? Something like "Decisions acquire a greater illusion of planning and deliberation the further into the past they were made". Feels like assuming there is a reason can be just as damaging as assuming there isn't one.

Perhaps slightly related: https://en.wikipedia.org/wiki/Planck%27s_principle

Re: DaisyUI: Tailwind CSS Components

#75

Post by fkyoureadthedoc »

I've worked with and without tailwind, with and without n other opinionated styling solutions. It honestly doesn't matter. Use whatever you want. Your project gets big enough you're going to make a mess of it anyway.

Moving to Scoped CSS in Vue components was a pleasure though at the time.

Re: DaisyUI: Tailwind CSS Components

#76

Post by ChocolateGod »

qq99 wrote: post #50
doctoboggan wrote: post #49

Earlier quoted context omitted.

> Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of course you can. I tried using tailwind a few years ago and I think this was explicitly recommended against, at least at that time.

IIRC the creator of tailwind might have been against @apply too, but it didn't seem like a good recommendation to me

@apply to me I only use if I have no other choice, such as if I need to build a CSS file that needs to have classes with specific names. (Such as giving our company styling to a third party service).

Re: DaisyUI: Tailwind CSS Components

#77

Post by mpeg »

crowcroft wrote: post #33
coneonthefloor wrote: post #3

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.

Tailwind is just a different way of writing CSS. UI libraries and websites all end up converging on a common set of ideas because of usability and readability, perhaps you're conflating Tailwind UI libraries with Tailwind itself. Tailwind doesn't inherently force a website to look a certain way any more than flexbox or CSS grids might. I do agree in that if you're using Tailwind you're unlikely to be reaching deep in…

Tailwind comes with a set of colors, shadows, typography scale, paddings, etc.

Sure, you can override them, but most people don't and there is definitely a "tailwind look"

Re: DaisyUI: Tailwind CSS Components

#79

Post by jovdg »

mbb70 wrote: post #41
fbn79 wrote: post #18

Earlier quoted context omitted.

“Do not remove a fence until you know why it was put up.”

Off topic, but is there a term for the opposite concept? Something like "Decisions acquire a greater illusion of planning and deliberation the further into the past they were made". Feels like assuming there is a reason can be just as damaging as assuming there isn't one.

Might be the survivorship bias. Or "history is written by the victor".
Post reply on HN