undefined | Better HN

0 pointssuperice6mo ago0 comments

I'm not necessarily arguing in favor of deep cascading, but I don't see how something like this:

.form-element, .button { height: 32px; }

Is something that can be easily achieved with Tailwind without either using @apply all over the place, effectively now doing regular old CSS but with Tailwind syntax, or by using JS/TS variables extensively making the styling pretty hard to read. Either way, I'm not saying Tailwind makes it impossible, but it sure doesn't make it easier. And while Tailwind has a bunch of benefits, especially where it becomes a design system rather than a syntax for CSS, you can achieve ~90% of that by just defining a bunch of color and size variables at the root of your CSS and using that.

I don't mind Tailwind too much for 1:1 mapping with DOM elements, but I also don't really see why inline styles for that case would be bad.

0 comments

naasking6mo ago

> Is something that can be easily achieved with Tailwind without either using @apply all over the place, effectively now doing regular old CSS but with Tailwind syntax, or by using JS/TS variables extensively making the styling pretty hard to read.

Define an html component, say MyButton:

    <button class="h-8 other-inline-styles-here">{MyButtonText}</button>

And use that component everywhere and the styles carry through:

   <MyButton MyButtonText="Click here!" />

People worry about regurgitating the same CSS with Tailwind, while continuing to regurgitate the same HTML structures all over the place. Encouraging inline styling encourages you to stop repeating your HTML, which is a better approach, even for a design system.

cal856mo ago

The equivalent tailwind is to just put h-8 (or whatever it is) on whichever form elements and buttons you want to be that height. Tailwind recommends you never use `@apply` - it’s basically an escape hatch for weird, niche interop requirements if you’re not all-in on Tailwind.

What is it about your example that the tailwind approach (h-8) doesn’t achieve?

j / k navigate · click thread line to collapse