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

141–150 of 174 posts

Re: DaisyUI – Tailwind CSS Components

#141

Post by doytch »

btbuildem wrote: post #135

Ok, I'll guess I'll be the lone voice of dissent here. I don't like it. I think it goes against the concept of utility classes / functional CSS. As soon as you start making component-level classes, things begin to become opinionated and you lose the universality. My understanding of the functional CSS approach was that you'd make a button component, and use the variety of "atomic" classes to style it. If you're using…

You're right, it isn't really utility/functional CSS - it's more akin to BEM [1] at this point. But having used both...I think it's pretty much six-of-one, half-dozen of another; you can write good or poor CSS both ways! :D

[1]: http://getbem.com/introduction/

Re: DaisyUI – Tailwind CSS Components

#142

Post by azemetre »

manquer wrote: post #139
btbuildem wrote: post #135

Ok, I'll guess I'll be the lone voice of dissent here. I don't like it. I think it goes against the concept of utility classes / functional CSS. As soon as you start making component-level classes, things begin to become opinionated and you lose the universality. My understanding of the functional CSS approach was that you'd make a button component, and use the variety of "atomic" classes to style it. If you're using…

Absolutes are the problem. DaisyUI gives the flexibility of using Tailwind directly or higher level classes. Tailwind is great but sometimes you end up having 10-15+ classes for basic components that makes the code harder to read and reason with. We should have utility classes and composability, but relying on them exclusively is also not necessarily the best way either.

Can't you just use @apply to make a single uniform style that utilizes all those classes?

That's my understanding at least, like if you want to make a button, instead of have the same 10+ classes posted everywhere you make a new class with @apply and keep the styles uniform.

Then in the future if you need to change one of the core utilities it's also easily updated to all you the @apply classes you make.

Am I misunderstanding the purpose? I've only used tailwind twice.

Re: DaisyUI – Tailwind CSS Components

#143

Post by zkldi »

Phillips126 wrote: post #122
peterkelly wrote: post #93

Earlier quoted context omitted.

I've never used Tailwind, but am familiar with Bootstrap. When looking at the examples, the ones on the right looked pretty much exactly like Bootstrap and I didn't understand what was interesting or novel about it. Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?

> Is the code on the left (with lots of classes) actually what tailwind is like to use in practice? As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this: @tailwi…

But why would you use @apply instead of something like:

    .button {
        background-color: $gray-100;
        border: 1px $gray-200
        /\* so on... \*/
    }
i don't understand how these "micro" css classes actually help versus just setting the property.

Re: DaisyUI – Tailwind CSS Components

#144

Post by manquer »

azemetre wrote: post #142
manquer wrote: post #139

Earlier quoted context omitted.

Absolutes are the problem. DaisyUI gives the flexibility of using Tailwind directly or higher level classes. Tailwind is great but sometimes you end up having 10-15+ classes for basic components that makes the code harder to read and reason with. We should have utility classes and composability, but relying on them exclusively is also not necessarily the best way either.

Can't you just use @apply to make a single uniform style that utilizes all those classes? That's my understanding at least, like if you want to make a button, instead of have the same 10+ classes posted everywhere you make a new class with @apply and keep the styles uniform. Then in the future if you need to change one of the core utilities it's also easily updated to all you the @apply classes you make. Am I misunde…

yes you can use @apply. DaisyUI also supports @apply directives as well both for their own and tailwind clases.

However you have to use them yourself. With vanilla Tailwind there is no out of the box @apply directives already set you can use. Think of DaisyUI as basically a whole set of @applies someone already made for you.

For users new to frameworks with utility focus it can be less steep learning curve to experiment and all the out of the box abstractions can reduce the need for having your own.

Re: DaisyUI – Tailwind CSS Components

#145

Post by armchairhacker »

blacktriangle wrote: post #127
armchairhacker wrote: post #83

We've gone full circle - CSS components to inline CSS-in-HTML back to CSS components. But I actually think I will use this. A big problem with CSS is that you end up making overrides no matter how composable you make the classes. And some simple things (e.g. responsiveness) are unintuitive and / or annoying to do in CSS. Hence Tailwind's "CSS-in-HTML" mini classes. But that doesn't fill the core purpose of CSS, bigge…

I think the thing with Tailwind that people are missing is the opinion that CSS's bigger general purpose classes to avoid repetition have failed. However, most of us are using some kind of HTML templating system. What matters is that the design work only happens once in the code, repetition in the finished product is just fine. So moving the job of avoiding repetition out of CSS and into your HTML templating system i…

HTML templating (specifically FreeMarker macros) is what i’m doing now.

There are still some cases where classes are useful, like JS or when I have very different components with some shared style. But these are mostly edge cases. FreeMarker has some other problems though.

Re: DaisyUI – Tailwind CSS Components

#146

Post by dqx »

udbhavs wrote: post #38
whoisjuan wrote: post #5

I’m not saying this is ugly but the visual execution of some of these components is poor. No good usage of padding in some examples, poor ratios between the typography and the containers, inconsistent use of different line widths and border radius, weird and incosistent design choices in spacing and proportions… I mean. This looks alright and it will certainly make any UI look pretty decent, but the execution is not…

This sort of stuff was difficult to figure out when I was learning HTML/CSS, do you know of any guides which list similar rules and how to make "proper" use of properties like borders, padding, typography etc?

Graphic design

Re: DaisyUI – Tailwind CSS Components

#147

Post by midrus »

btbuildem wrote: post #135

Ok, I'll guess I'll be the lone voice of dissent here. I don't like it. I think it goes against the concept of utility classes / functional CSS. As soon as you start making component-level classes, things begin to become opinionated and you lose the universality. My understanding of the functional CSS approach was that you'd make a button component, and use the variety of "atomic" classes to style it. If you're using…

Well, this is true, but to me this provides a set of good defaults instead of starting from scratch. I see this very useful for example for side projects, where I don't want to start from scratch on every experiment I do.

For a work project, I'd use just tailwind for the reasons you mention.

Re: DaisyUI – Tailwind CSS Components

#148

Post by Nullabillity »

FractalHQ wrote: post #112
automatic6131 wrote: post #80

Earlier quoted context omitted.

>If it's just one class per property, you could just type out the CSS. You can, but then it rarely happens that you want the CSS to be fixed in that way for all time: the brilliance of tailwind is that you get resposniveness just by adding a few more classes. You cannot do that with inline CSS.

This is the one pro-tailwind argument I can agree with. Sometimes I’ll use their shorthand md: & sm: in @apply in place of media queries. The advantage is that they remain local to their relevant selectors. Makes me think- all I would really want is to be able to have multiple values in css. Maybe something like . .card { width: 5rem md: 10rem; } Snap… am I on to something?

Sass/Scss let you nest media queries inside of selectors years ago.

Re: DaisyUI – Tailwind CSS Components

#149

Post by elwell »

eenberg wrote: post #69

That page is extremely slow without hardware acceleration. It (hw-accel) was off for me because I updated some things without restarting Chromium, but I dunno. It doesn't "spark joy" with me.

Yeah it is lagging for me too. And I do have hardware accel off as well, because of a chromium bug.

Re: DaisyUI – Tailwind CSS Components

#150

Post by hu3 »

saadeghi wrote: post #120
debarshri wrote: post #90

I am new to UI/UX. Is it comparable to bootstrap? How is it actually different from the CSS and UI component libraries?

You could say it's a component library like Bootstrap but it's customizable in core because it's based on Tailwind CSS. For example if you want to customize a Bootstrap button, you need to write additional CSS files. With daisyUI you can simply add a class name.

> For example if you want to customize a Bootstrap button, you need to write additional CSS files

No you don't need to write CSS files for that. Bootstrap also offers utility classes.

If I want to customize padding I can add "p-3" or "p-4" class for example.

Same for other properties including colors like "bd-blue-800".

See: https://getbootstrap.com/docs/5.0/customize/color/

Post reply on HN