Comment by troupo | Hacker News Reader

Comment by troupo | Hacker News Reader

Parent Full thread

Boilerplate? What do you mean?

    :root {
      --gap-default: 2rem;
      --gap-large: 4rem;
    
      ... 30-40 more vars ...
    }
    
    .component1 {
      margin: var(--gap-default);
      padding: 0 var(--gap-large);
      ... more styles like this ...
    }
    
    @media (min-width: 640px) {
      .component1 {
        padding: 0 var(--gap-default);
      }
    }
    
    @media (min-width: 768px) {
      .component1 {
        ... other overrides
      }
    }
    
    /* potentially repeat for other breakpoints ...*/
    
    /* repeat for all components */
    
    /* repeat for some internals of some components */

There's a also a good (if contrived) example directly at Tailwind: https://tailwindcss.com/docs/utility-first

> As for features, it took months before grid was included in Tailwind. New powerful and useful selectors aren't there.

No one stops you from using whatever CSS you need alongside with Tailwind. I do that for the excellent layout breakout I found here: https://ryanmulligan.dev/blog/layout-breakouts/

Can't see how this makes Tailwind "ant-CSS".

> As for performance, can Tailwind split its compiled CSS so that only rules used in the displayed components are loaded?

Tradeoffs.

Most existing solutions can't even detect duplicated CSS. So if your existing component already has `width: var(--some-var)`, and you load a different component with the same style... You will still load that style hidden in a different (often auto-generated unique) class name.

Meanwhile with Tailwind has a fixed number of classes that apply to all components equally.

So, if you have a complex app with multiple component variations, of course you'll need to split your CSS and only load relevant CSS for displayed components. Because your CSS grows with the amount of variations, and each of those variations becomes its own unique class.

For Tailwind though that growth slows almost immediately because... it's just a fixed set of classes.

Thanks for the great reply.

Here are my thoughts:

In your code example, all that is in :root should be used from project to project. As it is Tailwind. Only values should change. Again, same as Tailwind. So I don't really see a problem.

For .component1, you would do the same in Tailwind albeit with fewer characters but as I said, your IDE should pick up the slack here.

mb<tab> --gap<tab> and it is done.

As for your duplicate width problem, it can be solved easily with a linter that prevents styling across files. I'll give you an example if you're interested. At the same time, you would be repeating "width" across components in Tailwind too.

So the duplication still exists, if I understand correctly. Same with the growth of CSS... In Tailwind you grow the HTML instead. Fixed clases or not. I don't see how it is better but, again, maybe I'm missing something.

As for the media queries, same as above: your IDE should pick up the slack.

BUT!

The thing is that by writing modern CSS, you would not need most of these media queries! Do you know "clamp()[1]"? It's magical

And unfortunately not supported in Tailwind at the moment

.component1 { clamp(var(--gap-default), 1vw, var(--gap-large)) }

the above will do what you want without media queries! clamp() solves a loooot of these use cases. Honestly I don't write much media queries anymore and yes, that's great.

And if I may, I think Tailwind here prevents you from thinking about better and simpler solutions like this one. If it ain't included in what you're using, it's normal to not think about it. But really, this is a game changer. And it's been available for certainly three years. That's a lot.

And in the end, I'd say using real CSS with Tailwind kind of defeats the purpose. You end up with different styling methods for different components. I don't think that's good. More like a "hack".

But really, your example above is right on point: by excluding new approaches, Tailwind disincentivize you from using them when they would solve many of your problems elegantly and simply.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

edit: the Tailwind example provided is bad CSS. As were the ones given in the first fundamental post by Mr Wathan. These are strawmen. If you're interested, I'll give you an example of good CSS producing the same output.

Reply on news.ycombinator.com