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

101–110 of 174 posts

Re: DaisyUI – Tailwind CSS Components

#101

Post by jhgb »

onion2k wrote: post #37
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 n…

> the defaults were good enough that no one changed them, and consequently every SaaS startup's product looked the same for about 5 years

Sounds like native GUI experience on Mac or Windows for quite some time, then? I'm certainly not offended when all buttons look the same. At least I immediately know that they're buttons.

Re: DaisyUI – Tailwind CSS Components

#102

Post by lyian »

peterkelly wrote: post #93
jpomykala wrote: post #79

You are trying to solve problems which were created by Tailwind, and you end up with Bootstrap.

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?

Yes, the core idea is that you use a class which applies one css property to the HTML element. In practice you can end up with a lot of classes.

Re: DaisyUI – Tailwind CSS Components

#103

Post by ushakov »

peterkelly wrote: post #93
jpomykala wrote: post #79

You are trying to solve problems which were created by Tailwind, and you end up with Bootstrap.

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?

yes!

https://tailwindcss.com

Re: DaisyUI – Tailwind CSS Components

#104

Post by axegon_ »

Great! Over the past 6 months or so I've noticed a trend which I like: people are less obsessed with all the modern react-angular-vue-js-everything-html-css-bad notion and a lot of people are starting to admit that this whole sack of gibberish is unmanagable and unmaintainable(the web got it's own version of segfaults where something crashes and no one has even the slightest idea why) and we are coming full circle back to the late 2000's internet. Which to my mind was the golden age of the internet: you could slap a vga cable onto a potato and it had the computational power to display any page, whereas in recent years a single page eating up 200+ mb of your memory and increasing the cpu usage by 15-20% was a completely normal phenomenon. Oh and let's not forget "ew jquery, that's 200kb, that's horrible" all while bundle.min.js is a 15mb freak. Good job, personally I had completely lost hope, now I am starting to have some.

Re: DaisyUI – Tailwind CSS Components

#105

Post by lawn »

bennyp101 wrote: post #43
udbhavs wrote: post #38

Earlier quoted context omitted.

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?

Refactoring UI [1] is a good place (from the guys behind Tailwind) - admittedly I've drunk the Tailwind koolaid, but there are some useful tips on there from a designer POV [1] https://www.refactoringui.com/

I dislike Tailwind's choice of inlined styles in html, but I agree that the advice in the book is very good.

Re: DaisyUI – Tailwind CSS Components

#106

Post by nickjj »

eric4smith wrote: post #59

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…

There's also https://tailkit.com/, the markup is pretty reasonable. It was designed by someone who has been making themes for ~10 years.

I did a review of Tailkit in general here: https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwin...

Re: DaisyUI – Tailwind CSS Components

#107

Post by robertwt7 »

So much love for tailwind, I love it. Honestly though I haven't use any other component than Material-UI for the past couple of years. I was thinking to convince my previous company to buy tailwind-ui just for the sake of curiosity :p but then I know I won't use it much. So not sure..

In the end the point of all of us using tailwind is because its not "opinionated" like bootstrap right?

Re: DaisyUI – Tailwind CSS Components

#108

Post by AnonC »

MonaroVXR wrote: post #96
udbhavs wrote: post #38

Earlier quoted context omitted.

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?

I have made notes about these things you're asking. But no idea how to share them.

You could refine them, group the points and put up a blog post (or a GitHub page) and share that here (as its own submission). If it’s with visual examples, all the more better. I’m sure somebody will find it useful.

Re: DaisyUI – Tailwind CSS Components

#109

Post by [deleted] »

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…

[deleted]

Re: DaisyUI – Tailwind CSS Components

#110

Post by FractalHQ »

karlerss wrote: post #54
supermatt wrote: post #13

Earlier quoted context omitted.

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.

And the result is html and css that is easier to read later. I’m so fast with CSS that Tailwind inevitably slows me down as an app scales.
Post reply on HN