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

51–60 of 174 posts

Re: DaisyUI – Tailwind CSS Components

#51

Post by bennyp101 »

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…

There is an awesome[1] site for tailwind that has lots of places that could give you ideas.

Or you could buy the Tailwind UI[2] - they add lots fairly often.

[1] https://github.com/aniftyco/awesome-tailwindcss [2] https://www.tailwindui.com

Re: DaisyUI – Tailwind CSS Components

#52

Post by volkandkaya »

kristiandupont wrote: post #49
volkandkaya wrote: post #45

DaisyUI is a great starting point but it is missing a lot to make it functional and then you end up recreating the wheel. I agree with some comments that it is lacking that wow factor that TailwindUI has. I'm working on https://versoly.com/ which is a Tailwind Website builder and have ran into a bunch of issues with Tailwind when it comes to building static sites. I love that Bootstrap offer "btn btn-primary" and it…

>For Tailwind to take off it needs You have a lot higher standards than I about what "taking off" means :-D

It is doing amazing.

But I talk with a lot of full stack and backend developers who still use Bootstrap. They even own TailwindUI and other templates but stick to Bootstrap.

That to me means there is a big issue with Tailwind and the developer experience.

Once solved Tailwind will grow even faster and help more developers/companies.

Re: DaisyUI – Tailwind CSS Components

#53

Post by Cthulhu_ »

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?

As others commented, inline CSS has downsides. But there are libraries out there that allow you to write a block of CSS alongside your component that are neatly packaged into a CSS file, like Styled Components (https://styled-components.com/).

Re: DaisyUI – Tailwind CSS Components

#54

Post by karlerss »

supermatt wrote: post #13
hashedout wrote: post #6

This is a very nice step in making Tailwind more Bootstrap like (read beginner friendly). One common complaint about Tailwind is that it makes the HTML look very full (full of classes). A very good example on OP's website for a button: Using tailwind: Button Using daisy: Button Although I personally think that the corners at a bit too rounded by default, giving it a very amateur look but I think you can customize tha…

Thats exactly what this component library does: https://daisyui.com/components/button If you want to do in "raw" tailwind (i.e. without this component library), you can use layers to create your own component classes, e.g.: @layer components { .btn { @apply inline-block px-4 py-3 text-sm font-semibold text-center uppercase transition duration-200 ease-in-out rounded-md cursor-pointer; } .btn-primary { @apply text-whi…

If it's just one class per property, you could just type out the CSS. Using emmet in IDE is probably faster than finding the tailwind classes with autocomplete.

Re: DaisyUI – Tailwind CSS Components

#55

Post by FrontAid »

That page broke tabbing through interactive elements by using nested focussable elements like this:
Because of that, it is sometimes necessary to tab twice to focus the next element. Not sure whether that is a problem of DaisyUI in general or just their website. But it is definitely annoying.

Re: DaisyUI – Tailwind CSS Components

#56

Post by piaste »

hardwaresofton wrote: post #33
hashedout wrote: post #26

Earlier quoted context omitted.

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…

I'm not a frontend developer so I've been watching this from the outside over the years of reading HN.

The impression I got is that Tailwind is essentially CSS 2.0 with warts ironed out (sorry for the unpleasant mixed metaphor):

A) CSS / Tailwind: lots of little 'atomic' classes describing individual visual properties. Easy to understand, easy to customize, but slow to read, slow to get started, with plenty of stuff to learn

B) CSS frameworks / Tailwind components: fewer classes declaratively describing the component's role (eg 'btn-primary'). Quick to get started, elegant to read, but prone to abstraction leakage and trickier to bend to your own exact specifications

There's always been a need for both kind of tools for different projects, in the same way that e.g. network programming may involve anything from bit-banging commands to high-level protocols.

Over the years CSS frameworks kept improving, but CSS was much slower to do so - although it acquired flexbox, grid, etc., the language limitations stayed, and they were bad enough to spawn SASS/LESS out of a genuine need.

Tailwind saw a ton of hype and adoption because all the developers who had always wanted to go the (A) road now had a well-designed set of simple classes they could use with a lot fewer footguns, plus a bunch of developers who had adopted (B) because it was the road that had all the momentum suddenly realized that they probably wanted to use (A) once it was made less painful.

DaisyUI and similar projects don't do anything that Bootstrap didn't do for CSS, but by building on top of Tailwind it means that, when your project or resources grow and you want to move from (B) to fully customizing your style in (A), you will be able to write your individual little graphic touches in Tailwind instead of plain CSS.

Re: DaisyUI – Tailwind CSS Components

#57

Post by volkandkaya »

joexuyi wrote: post #12
hashedout wrote: post #6

This is a very nice step in making Tailwind more Bootstrap like (read beginner friendly). One common complaint about Tailwind is that it makes the HTML look very full (full of classes). A very good example on OP's website for a button: Using tailwind: Button Using daisy: Button Although I personally think that the corners at a bit too rounded by default, giving it a very amateur look but I think you can customize tha…

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.

It is hard to breakout of Bootstrap defaults.

Both libraries have pros and cons.

Re: DaisyUI – Tailwind CSS Components

#58

Post by Aeolun »

I tried using Tailwind, but I just couldn’t get into it. It’s like having to learn CSS all over again because the classnames do not map 1-1 with their respective properties, and autocomplete is lacking.

Conversely, Chakra UI Box, which does more or less the same thing is super easy to get into.

This looks nice, but I kind of feel like we’ve come full circle two full times to get to this point.

Re: DaisyUI – Tailwind CSS Components

#59

Post by eric4smith »

Very welcome. Sometimes the amount of classes needed in Tailwind is enormous.

I paid for the TailwindUI pack too. But as nice as Tailwind is, the guys who built TailwindUI don't really get or understand a lot of real-world design patterns.

A lot of stuff in there is needlessly complicated. Our team end up trimming down things to 50% of the markup that they use, while retaining full responsiveness.

Overuse of flex for simple paradigms is a constant complaint of mine.

Hope DaisyUI improves Tailwind in some way.

Anyway... sorry to get sidetracked on a sidebar.. lol.

Post reply on HN