undefined | Better HN

0 points3cats-in-a-coat2y ago0 comments

Yeah, ok. Do tell me what are those ways. Maybe @apply? Then put some effort into realizing this is literally what you could do in CSS the entire time, but better, shorter, simpler, and with clear precedence rules, and complete assistance from the browser dev tools.

Look at this here and the ridiculous extent they insist on "NO, YOU MUST COPY AND PASTE ZEH STYLES!": https://tailwindcss.com/docs/reusing-styles

It's rampant dysfunction on full display, my friend. It's as clear as daylight. Copy/paste is the rookie approach, and Tailwind targets rookies. So it focuses on "it's not your fault, copy paste is good, they... they don't get you" approach and then throw @apply in there as some half-baked solution for those who are starting to wake up from the Matrix.

You are in an abusive relationship. Seek counsel.

0 comments

strangescript2y ago

"precedence rules, and complete assistance from the browser dev tools"

Huh? I am not sure what you mean here. Tailwind generates css that is completely explorable in any browser dev tooling. Its precedence is the order of the css classes just like any other css class.

You can solve class overload by just making components. Create a Button component one time, have it contain the tailwind classes you want, and then all through your app, just call your Button component and never think about it again.

You can also just define custom tailwind classes in the config you want to do something really specific or crazy.

If that is too much work you can use Daisy UI which is just a tailwind plugin and it creates a ton of classes that essentially compress tailwind classes down to manageable chunks if you are fine with Daisy's style.