News for hackers. Stuff that matters.
Re:Tailwind UI by city41 on Wednesday February 26, 2020 @11:47AM (#22424672)
It’s common, even expected, to extract that card into a component of some kind (React, web components, mustache template, etc) so you still only have to update the css once.
Re:Tailwind UI by ec109685 on Wednesday February 26, 2020 @12:28PM (#22425125)
Your components often get bloated since you have to account for subtle business logic differences between views.
Re:Tailwind UI by stefanfisk on Thursday February 27, 2020 @12:19AM (#22430741)
Isn't that what the container/component split is for? Presentation logic in a container, markup and styling in a component. If you need to reuse the same visual component in logically different contexts you create a new container that mangles the props as appropriate.
Re:Tailwind UI by ec109685 on Thursday February 27, 2020 @01:51AM (#22431209)
Yeah, you can. I've just seen this result in really complicated components. Other styles of CSS naturally separate presentation from html markup generation, so the cost of forking and specialized components is much lower.
Re:Tailwind UI by jp_sc on Wednesday February 26, 2020 @12:35PM (#22425187)
Sure, until, you need a variation on that card for some elements, and add some other tailwind classes to the HTML to do it. Everything seems to work fine for a while.

Then you update the styles of the card again but the new styles clash with the ones in those tailwind classes and you end with broken styles in some elements.

Mixing components and utility classes is a recipe for future chaos.

Re:Tailwind UI by city41 on Wednesday February 26, 2020 @12:44PM (#22425279)
How is that different from any other css? I'd argue any css solution would have this problem with components.

edit: thinking more, you can override classes. So yeah, maybe utility/atomic classes are not as effective here.

Re:Tailwind UI by rojoca on Wednesday February 26, 2020 @02:02PM (#22426058)
No, you just create a new card component and adjust the tailwind classes on it.

Or, if it is a minor change, then conditionally include / exclude a small subset of tailwind classes.

The point is to not write your own CSS, you only use tailwind classes. In this way you can look at the template for each of your components and reason about / edit their style and layout easily.