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

11–20 of 174 posts

Re: DaisyUI – Tailwind CSS Components

#11

Post by thomasfl »

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…

A few pull requests could fix most of what you mentioned, if the maintainer approved it.

Re: DaisyUI – Tailwind CSS Components

#12

Post by joexuyi »

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.

Re: DaisyUI – Tailwind CSS Components

#13

Post by supermatt »

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-white bg-indigo-500 hover:bg-indigo-600;
    }
  }

Re: DaisyUI – Tailwind CSS Components

#14

Post by whoisjuan »

AngeloAnolin wrote: post #9
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…

I think it is not a fair comparison with the Tailwind UI where there's probably more than one person doing the work plus the whole expertise of the actual Tailwind authors in the mix. If you are able to observe what is severely lacking in this implementation, I am pretty sure that the Github author would welcome your suggestions / comments / PRs and any contribution to make this better. For a start, this is actually…

Totally agree and I mean it with no animosity. As an adopter of Tailwind, I really want to see more of these components kits and for the exisiting ones to keep improving.

Re: DaisyUI – Tailwind CSS Components

#17

Post by hardwaresofton »

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…

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 by many

- People are much more willing and able to use CSS variables

- Shadow DOM encapsulation and other methods of isolating styles from one component to another are well explored

- there's some stuff on the horizon where people are JITing here and there and writing custom compositors ("Houdini" and related tech)

But I'm not sure there have been any large paradigm shifts in CSS over the last 10 years, and Tailwind no matter how successful it's been commercially and in the headspace of developers seems to have been largely a very useful somewhat passing obsession.

Re: DaisyUI – Tailwind CSS Components

#18

Post by hardwaresofton »

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 you're off to the races), because I think that's a much more composable way to use these snippets copy & pasting HTML, looks like Daisy needs to be next.

[EDIT] A bit annoying to others probably to drop a lede and I have no idea when I'll get done and publish it with the blog post so if someone just wants to see the code:

https://gitlab.com/mrman/landing-gear

If anyone wants to contribute a snazzy icon I'd love to take it! There's no landing page to showcase it yet but there's files like lg-left-header/index.html[0] which showcase usage and the intended simplicity.

Obviously if you're trying to get started, use the blocks as they're presented and the awesome work done by WickedTemplates (they've also got some ready-to-go straight out of the box templates and other stuff for you to use on their main site!), but if you're interested in lit[1]-powered drop-in components, follow that space.

[EDIT2] - For those taking a look at the code, note that there are like... 4 variants of the left-header component. Half of the time spent getting this out (it's all simple in theory -- just copy + paste and swap out static text for variables) was figuring out which parts to unify and which parts to keep separate for easy drop-in use. There's not much there yet, but it's more a matter of me finding time to sit down and make these decisions for every kind of component on the wickedblocks page.

There are some concerns like i18n that I've punted on by just making sure that all static text were component inputs, but ideally integration with browser-supported i18n[2] is the proper way to do things in a minimal but standards compliant way.

[EDIT3] - Added note to make it clear I didn't create WickedBlocks/WickedTemplates

[0]: https://gitlab.com/mrman/landing-gear/-/blob/main/lg-left-he...

[1]: https://lit.dev/

[2]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...

Re: DaisyUI – Tailwind CSS Components

#19

Post by Brajeshwar »

soheil wrote: post #16

Oh I pray that I remember this website next time I'm looking for an HTML/css template. Great job, this UI looks so polished and is as modern as it gets.

A much simpler Bootstrapped powered one popped up on Hackernews recently, https://frontendor.com

Re: DaisyUI – Tailwind CSS Components

#20

Post by dmitriid »

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…

No. No. It's a link disguised as a button. Stop doing that.
Post reply on HN