Just switched from Flowbite to Daisy.
It’s far simpler, and I don’t have to mess around as much with defining my own button styles etc.
As with all tech, Tis all a long road to the middle
DaisyUI: Tailwind CSS Components
151–160 of 181 posts
Re: DaisyUI: Tailwind CSS Components
#152Wrapper of a wrapper. Front end dev is a mess lol
You summed it up pretty well.
Re: DaisyUI: Tailwind CSS Components
#153Is it just me or the tailwind users actually learned what is a semantic css?
Re: DaisyUI: Tailwind CSS Components
#154Earlier quoted context omitted.
> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Isn't this called classes and Ids in CSS? Is Tailwind just CSS on top of CSS?
Tailwind is a set of utility CSS classes you can use that tend to guide you into writing CSS that looks like it "fits" together. E.g., consistent gaps if you use `gap-1`, `gap-2`, etc., rather than a hodgepodge of "hmm did I use margin-right: 2px or 1em or what" that can emerge in a large CSS codebase with many developers. We can use a `m-1` or `p-1` class to define a base padding, and as long as everyone knows that…
Why not use open props then? You get a style system, but not the weird turn-classes-into-inline-styles thing
Re: DaisyUI: Tailwind CSS Components
#155Earlier quoted context omitted.
I've been complaining about this for years, even writing an article on it. When the article initially made it's rounds on HN it was divisive. People seem to have cooled off a bit on tailwind since then, which is good, but you still see it being dumped into new projects, or originating things like this that attempt to build a facsimile of what we get "for free" in the browser https://pdx.su/blog/2023-07-26-tailwind-an…
Yes to all you have written here. That helps me feel less insane. If React had scoped styles like Vue has, I don't think tailwind would have gained such traction. Lack of scoped styles in native CSS has always been a fundamental shortcoming (always, except for the brief moment in like 2013 when @scope was spec'd and implemented, only to be snuffed out shortly thereafter). But it's coming for real now, maybe...
We've got @scope back now, and, while it's not exactly the same as it was in the early part of the 2010s, it's still pretty good, as it let's you set both upper and lower bounds for a block of css. Being able to say "these selectors don't apply below this point" is immensely powerful, letting you build donut styles for components very easily
It wasn't quite ready when I wrote a sort of follow up article[1] about new CSS features largely eliminating the need for scss, but it's basically baseline now.
My personal new favorite feature is color mix and the other color compositional functions. You can do really neat tricks with them, current color, and variables, that are otherwise impossible, even with scss
Re: DaisyUI: Tailwind CSS Components
#156I'm surprised that a lot of the comments seem to be missing the reason that this project exists. In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of…
> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. CSS classes already support this natively. The whole point of CSS was move up a level of abstraction, so you could collect related styles into a class and reference that class everywhere…
And I still prefer using tailwind and daisyui to build my applications.
Re: DaisyUI: Tailwind CSS Components
#157I'm surprised that a lot of the comments seem to be missing the reason that this project exists. In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of…
> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. CSS classes already support this natively. The whole point of CSS was move up a level of abstraction, so you could collect related styles into a class and reference that class everywhere…
Most of my Tailwind objections have gone away with the availability of CSS layers. Now using a library for a utility layer, which can surgically override your component layer, makes perfect sense. And using a library for that component layer that adheres to the same design token API as the utility layer also makes sense.
Re: DaisyUI: Tailwind CSS Components
#158Earlier quoted context omitted.
Yeah it's turning the crank another half turn. It's insane to me how the webdev ecosystem keeps reinventing itself over and over and over again, trying to solve their previous mistakes without ever reflecting on and learning from why those issues existed in the first place.
I'd say otherwise, it's not circular at all, it's a clean design that uses Tailwind at a low level and builds a high level on top of it.
Again, that's just Bootstrap with extra steps.
Re: DaisyUI: Tailwind CSS Components
#159I'm surprised that a lot of the comments seem to be missing the reason that this project exists. In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Can you just apply it to `button { @apply flex items-center blahblahblah; }` in app.css? Of…
> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc.
You should be using components for this, in whatever backend or frontend framework you have.
And if you say "well this button needs to have this specific piece of data or text but other buttons don't" - great, extract that from the component. There's no reason to create 12 different buttons.
Re: DaisyUI: Tailwind CSS Components
#160Or use a better atomic CSS in JS tool like Panda CSS and just make a mixin however you want (or use their batteries included library if you don’t want to). It’s too bad Tailwind is so popular despite it being so bad at composition and unreadable.