DaisyUI – Tailwind CSS Components

Post by dimal » Fri, Jul 30, 2021, 3:41 PM UTC

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…

Post by maxcan » Fri, Jul 30, 2021, 3:46 PM UTC

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…

Post by ratww » Fri, Jul 30, 2021, 4:01 PM UTC

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…

Post by onion2k » Fri, Jul 30, 2021, 4:24 PM UTC

breakfastduck wrote: post #156

onion2k wrote: post #37

Earlier quoted context omitted.

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…

I take it you dislike native software then...

Post by mcluck » Fri, Jul 30, 2021, 4:33 PM UTC

zkldi wrote: post #143

Phillips126 wrote: post #122

Earlier quoted context omitted.

> 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.

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer components {
     .button {
       @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
     }
    }

    .button {
      font-size: var(--text-2xl);
      padding: var(--p-2);
      background-color: var(--gray-100);
      color: var(--gray-600);
      border: solid 1px var(--gray-200);
      pointer: cursor;
    }
    .button:hover {
      background-color: var(--gray-200);
      border-color: var(--gray-300);
    }