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

51–60 of 181 posts

Re: DaisyUI: Tailwind CSS Components

#51

Post by begueradj »

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…

> you can continue to use tailwind for everything else that DaisyUI has not implemented. It's just an additive layer to tailwind.

I used VuetifyJs with Tailwind in the same project, so I do not see the difference/advantage

Re: DaisyUI: Tailwind CSS Components

#52

Post by conductr »

qq99 wrote: post #44
slightwinder wrote: post #40

Earlier 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…

> 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 just handwrite my frontend code so I'm rather ignorant on this topic, it seems like a lot more extra hoops than just writing by hand which actually isn't very difficult (but I'm a single dev on rather smaller projects)

Re: DaisyUI: Tailwind CSS Components

#53

Post by varbhat »

I don't like the way how Daisy UI looks. But, I do like the way how Bootstrap or Semantic-UI CSS frameworks look. Has anyone tried to recreate the components of Bootstrap or Semantic UI using Tailwind CSS (including the looks)?

Re: DaisyUI: Tailwind CSS Components

#54

Post by [deleted] »

sudhirj wrote: post #10

This is a rebuild of the antithesis of Tailwind on Tailwind. Bootstrap had this for decades (Daisy even copies the same semantic class names in some cases). Tailwind was supposed to break away from this, to specific actual styles directly, but looks like we're coming back full circle again. Why not just use Bootstrap?

[deleted]

Re: DaisyUI: Tailwind CSS Components

#55

Post by cheald »

90s_dev wrote: post #35
Liquidor wrote: post #17

I don't really use Tailwind. I enjoy my (S)CSS. I took a look at https://daisyui.com/components/button/ and immediately I see classes that look similar to Bootstrap. So my question is: Why build components on top of something like Tailwind instead of just regular CSS? Or are you able to customize and use Tailwind mixed in with the components? Then sure why not I guess. Otherwise it feels like going full circle here.

I've been writing CSS manually since it came out. The latest additions make it less difficult, like & and nesting, variables, etc. But overall, CSS is just really difficult to scale well properly. I should probably learn Tailwind at this point, instead of continually rolling my own CSS. So now I have DaisyUI bookmarked since the site is excellent and looks so useful.

I've been writing CSS by hand since the late 90s. I resisted Tailwind for a long time, but I tried it on a pet project and I get it now. It doesn't fundamentally do anything that you can't do in CSS already, but it sort of "quantizes" the DX such that the vast majority of the CSS you'd usually end up writing boils down to a set of conventions.

You can still write your own CSS as needed (and probably should, for some of the more esoteric Tailwind cases), but stupid stuff like flexbox directives and padding/layout that you do literally everywhere become a lot easier, especially with things like the Tailwind VSCode plugin which provides autocomplete, reflection on defined variables, and linter errors for duplicated or incompatbile expressions.

Re: DaisyUI: Tailwind CSS Components

#56

Post by commotionfever »

this isn't how Tailwind is supposed to be used. you abstract at the level of components, not class names. instead of

then, inside your Button, you get a small bit of markup and your class names. makes it easy to see which markup gets which styles

that's also why the other discourage use of @apply, and why "ugly HTML" is rarely am issue. at least not in my experience

---

that said, if you're using Tailwind in an environment where there's no components, fragments, partials, whatever - then this might make sense

Re: DaisyUI: Tailwind CSS Components

#58

Post by jug »

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…

But I mean, Tailwind exists to make you quickly prototype and standardize upon a personal look & feel for your site and reuse these styles with components. The standardization/reuse aspect is absolutely part of it.

Re: DaisyUI: Tailwind CSS Components

#59

Post by wahnfrieden »

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…

SCSS and Sass don't have a "gap-1"

Re: DaisyUI: Tailwind CSS Components

#60

Post by ipaddr »

The biggest advantage is I can have great looking components with simple bootstrap syntax (add a primary or secondary class). When I need to I can write full tailwind syntax if I need something different. Great timesaver and while giving you all of your powertools.
Post reply on HN