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

61–70 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#61

Post by ipaddr »

treyd wrote: post #37
Calavar wrote: post #26

Earlier quoted context omitted.

Tailwind is already a full circle. It is essentially a toolkit for using CSS to emulate the pre-CSS era approach of putting styling info inside attributes on the markup (remember the HTML2 days of bgcolor and cellpadding?).

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.

You can use tailwind and classes at the same time.

Re: DaisyUI: Tailwind CSS Components

#62

Post by qq99 »

conductr wrote: post #52
qq99 wrote: post #44

Earlier quoted context omitted.

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…

> In a way, using tailwind can be like variablizing your CSS at compile time Isn't this what SCSS or Sass did though? They were around long before tailwind. Is there a reason to pick Tailwind over those? I assume most projects were using them then decided to migrate to tailwind once it became popular, but why did that happen? Was it just keeping up with the cool kids or some actual differentiating features? I still j…

Tailwind is just a set of utility classes (that also tends to be compiled), while SCSS is a full-on CSS compiler that offers no utility classes by default.

A lot of the features that SCSS enabled are now natively part of CSS, so it has fallen somewhat out of favor (because: why compile when you can use the same features for free without compiling?). Nesting is in CSS now, which was the killer feature at the time. & scoping too. Variables especially are better in raw CSS because you can re-assign them and have them transition/animate, which is not possible in SCSS. SCSS helped to evolve CSS.

I initially thought Tailwind was very stupid, but after using it, it is somewhat freeing to write some "1-off inline CSS" (essentially) on the DOM node itself. Sometimes inline CSS is OK (and it's nicer to do so with an easy to remember and powerful utility class rather than via `style=`).

For some, it eliminates `MyComponent.css` that has literally 1 rule with 1 style inside it. Colocation with the DOM in some cases making it easier to modify + reason about, less context switching.

Re: DaisyUI: Tailwind CSS Components

#66

Post by jarjoura »

Calavar wrote: post #36
qq99 wrote: post #27

I'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…

Yes, Tailwind's CSS reminds me of the same unoptimized HTML tag soup that editors of the 2000s era web used to spit out. Tailwind is created by designers for designers. It's perfect for how designers think about layout and works well for them in a world with strict design specs.

Unfortunately, it's also incredibly bespoke and since it's found in most recent well designed templates, engineers must also learn how to work with it. Something 5 years ago that would have died from its own complexity weighing it down for the new shiney, is now kept alive by the ease at which AI can keep it going.

Re: DaisyUI: Tailwind CSS Components

#68

Post by trevor-e »

I agree with others that this is not how Tailwind is meant to be used. For example, the approach shadcn (https://ui.shadcn.com/) takes is much better IMO.

Creating helpers like `btn` makes it very difficult to understand how it works and is not very customizable. Shadcn creates an actual component for you in your codebase and is just trivial Tailwind styles to modify.

Re: DaisyUI: Tailwind CSS Components

#69

Post by danenania »

slightwinder wrote: post #40
qq99 wrote: post #27

I'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. Isn't this called classes and Ids in CSS? Is Tailwind just CSS on top of CSS?

Imo the main benefit of Tailwind (or any other style-in-JS approach) is parameterization. Styling often changes based on runtime state. Mapping runtime states to css classes/ids (or scss functions et al) is brittle and doesn't scale well.

Re: DaisyUI: Tailwind CSS Components

#70

Post by mejutoco »

qq99 wrote: post #27

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

I think in most projects people are using some sort of component system outside of tailwind. A react component, for example, could have the tailwindcss classes. Then that component is used multiple times.

Post reply on HN