proposed styling guide

[theosanderson]

these are my opinions on the best way to do this. obviously to be discussed!

🚀 Preview: Add preview label to enable

[chaoran-chen]

I don't have a strong opinion here but I would like to mention that to me, there are advantages to using it when appropriate. While tailwind is already helpful in restricting the sets of values that one uses (i.e., helping us to avoid just using any color/size/etc.), it is still very broad and we do not have a design system to guide us (e.g., what should have a rounded corner, what not? how should the border radius be? etc.). In the absense of such a guideline, using Daisy UI is an easy way to maintain more consistency across components.

[theosanderson]

IMO it's equally easy to create a shared <Button object that applies that rounding, it's just that we haven't got round to doing that.

I just think it gets complicated when you combine custom tailwind and daisy because it's hard to keep track of what daisy is actually setting (and also how that might change with upgrades). If one exclusively uses tailwind then one reaches a point where you can just look at the component class list and theoretically render it in ones head (and so can LLMs).

[chaoran-chen]

I'm thinking more across different UI elements - how do we ensure that we apply the same "visually compatible" style among the buttons, inputs, boxes, etc.?

If one exclusively uses tailwind then one reaches a point where you can just look at the component class list and theoretically render it in ones head

Are we/many of us capable of that in practice though? That's a major problem I see with tailwind: it's easy to write but (if one always write all the classes directly and don't introduce own clases or some other system to manage them) it can get very tricky to read.

[theosanderson]

So when I became more centrally involved in the design a few years back we were at a much more "everything daisy" point. And I'm sure it was very consistent - but IMO the design has improved quite a lot since then.

To ensure a visually compatible style with a tailwind approach we would make a Button component and Input component and a Checkbox component, etc., etc. and make sure they all looked good.

At the moment we have mostly just been adding TW classes and making an effort that the things we add are sympathetic to the design as we go, which TBH in my view has been fine, but I'm not saying it's optimal.

[theosanderson]

Are we/many of us capable of that in practice though?

Not quite literally - but when I see mx-5 I do know that something should have an x-margin of 5 TW units. But when combined with daisy actually that may have been overwritten by a daisy class or something, so it gets confusing.

[theosanderson]

and, browsing around here is an example of something that's not consistent with the rest of the design (grey button):

(which is my bad!)
but that's because it's something that's still using daisy [for colour] - so when removing that we might hopefully find ourselves fixing that

[theosanderson]

(made an issue for the component library: #6580 )