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

31–40 of 174 posts

Re: DaisyUI – Tailwind CSS Components

#31

Post by BigJono »

tpetry wrote: post #22

I am more impressed by the landing page than the actual components. Is anyone aware of a good component library for landing/marketing pages for Tailwind? There are toolkits like https://frontendor.com but they all follow the 5-10 year old "theme" of insanely packed content you had seen on SaaS pages some years ago. Together with many photographs or flat humans... I can't find anything with "new" approach which uses m…

I must be getting old because I literally don't get front end devs these days...

The landing page is like a few divs with some position centres. What would you even use a "component library" for in this case? The only thing on the entire page with any complexity whatsoever are the component demos (which are obviously part of this DaisyUI thing itself) and the code blocks/syntax highlighting, which I'm sure there's a billion libraries for already.

I'm really struggling to come up with any sort of other dependency that would help me build that page any faster than just opening the text editor and shitting out some HTML and CSS.

Do people just spend so much time working with Bootstrap and whatever other cruft that they just never bother to learn the basics?

At this level of simplicity and for churning out marketing pages where you don't care about maintainability, you're probably better off looking for a WYSIWYG editor rather than a library.

Re: DaisyUI – Tailwind CSS Components

#33

Post by hardwaresofton »

hashedout wrote: post #26
hardwaresofton wrote: post #17

Earlier quoted context omitted.

I agree with the positive sentiment, but a cynical take might be that we've basically found our way back, traveling in a circular pattern. It looks like Tailwind and Tachyons are useful tools but they do have a sweet spot, and I've run into the annoyance of 20+ classes in my tiny projects as well. Descriptive Real changes to the landscape have been made along the way: - Flexbox and to a lesser extent grid are grokked…

I see this not as a replacement, but as a novice choice. As noted in the documentation, you can use tailwind classes to customize existing components but if you do not want to you can use it like bootstrap. Even for building a quick prototype which can be made to look good in future is a use case for this.

I want to note that I was talking about tailwind vs bootstrap and others in the abstract, less so about DaisyUI specifically.

What lead me to make the comment was the discussion point that "btn btn-primary" was so much more useful than 20+ tailwind classes. I agreed (it's something I have come across as well), but

It's clear that Daisy UI will get you up and running quickly and there are lots of similar projects out there that do things like this, but the meta discussion around whether we're going in circles or if we've actually moved forward and found a nice mix between what was the bootstrap style (1-2 classes that do all the work) and tailwind/tachyons (5-10+ classes that do the work).

To make the discussion less meta -- is the future things like DaisyUI? Bootstrap like classes but with the outlet for overriding not being manual CSS but actually being tailwind-style classes? In the past it was Bootstrap + your special large class/baked in styles, but in the future maybe it's "btn btn-primary box-shadow" or whatever, clearly a middle point of sorts

Re: DaisyUI – Tailwind CSS Components

#34

Post by thecryptodiver »

hashedout wrote: post #28
joexuyi wrote: post #12

Earlier quoted context omitted.

so why not just use bootstrap? I'm new to web development, but I thought the whole point of TailwindCSS is that it is more customisable than Bootstrap.

What if you as a beginner can start using Tailwind immediately with this library and can learn tailwind's utility classes at your own pace when you need to customize anything? I'm not sure about this path, but it might be good for a beginner.

Yeah, this seems more like the combo of ease of Bootstrap + the extendability of Tailwind.

Re: DaisyUI – Tailwind CSS Components

#35

Post by oefrha »

mikevm wrote: post #27
rvense wrote: post #23

Earlier quoted context omitted.

With Tailwind, if you write out something like that more than once or twice, you're really supposed to bundle it together. Either as a plain CSS class, or a component in your framework of choice. I suppose a library of common elements is a good thing to have, but the reason I like Tailwind is that I can use the utilities at first and then easily gather them together as plain CSS classes as and when that makes sense t…

But if you're going to hide away CSS inside a component, why not just use inline CSS? What does Tailwind add to this?

Whenever I read a comment like this I feel like talking to someone who’s never used Tailwind nor written inline CSS. How do you write inline CSS for pseudo-classes like :hover, :focus, :disabled? Media queries for breakpoints and dark mode? Not to mention more advanced features like divide-, space-, group-hover:, etc.

Re: DaisyUI – Tailwind CSS Components

#36

Post by rvense »

mikevm wrote: post #27
rvense wrote: post #23

Earlier quoted context omitted.

With Tailwind, if you write out something like that more than once or twice, you're really supposed to bundle it together. Either as a plain CSS class, or a component in your framework of choice. I suppose a library of common elements is a good thing to have, but the reason I like Tailwind is that I can use the utilities at first and then easily gather them together as plain CSS classes as and when that makes sense t…

But if you're going to hide away CSS inside a component, why not just use inline CSS? What does Tailwind add to this?

1) A set of a classes with consistent names for scales, colours, etc. You're not working with hex codes or pixel values. It's a more writable and much more readable syntax than inline styles.

2) It has variants for hover, etc (e.g.: class="bg-black hover:bg-white"). AFAIK you can't do that with inline styles.

3) I find it plays nicely with a workflow where I start out not knowing exactly what I'm doing, which is almost all of the time. I can smash ahead and do things in the class="" of each tag, then as I notice that I'm repeating myself, I grab small chunks of the class list and put them in '@apply's in a CSS file. Bottom-up, liek.

The class lists are just a lot more manageable than inline styles. They're copy-pastable and really easy to read when you get used to it, as long as the lists aren't too long.

Re: DaisyUI – Tailwind CSS Components

#37

Post by onion2k »

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…

Back when Bootstrap 2 was the most popular UI library one of the biggest problems with it was that the defaults were good enough that no one changed them, and consequently every SaaS startup's product looked the same for about 5 years. Pushing people to tweak things while still giving them a solid foundation is a good thing.

I'm not saying that's necessarily the case here, but there is a strong argument in favor of not making the default theme for a UI library look perfect.

Re: DaisyUI – Tailwind CSS Components

#38

Post by udbhavs »

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?

Re: DaisyUI – Tailwind CSS Components

#39

Post by runawaybottle »

My goodness Bootstrap, how far ahead of your time you were. To this day we copy you, god bless you m’lord.

Nope, I reject this. We should be so much farther ahead than this. It’s the garbage fullstack developers that need this crap to make a good ui. They don’t belong on the frontend, and I’m pretty tired of it.

Our UI/UX will get shittier and shittier if we coddle this group.

Re: DaisyUI – Tailwind CSS Components

#40

Post by Mike_Andreuzza »

hardwaresofton wrote: post #18

In this space also: https://blocks.wickedtemplates.com (NOTE: I did not WickedBlocks/WickedTemplates -- it's the awesome work of the folks over at WickedTemplates https://wickedtemplates.com , which they shared on HN I believe a while back) I'm actually working on a little side project right now where I turn wickedblocks into a set of usable native web components (as in drop an tag and the component on your page and…

Nice one.
Post reply on HN