Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind: style your site without writing any CSS

jvns.ca

Post reply on HN
Print view View original

71–80 of 185 posts

Re: Tailwind: style your site without writing any CSS

#71

Post by paulsutter »

mattferderer wrote: post #37
SunboX wrote: post #27

I really don't see the benefit. Sure, you don't write "CSS", but you write a lot of classes that look like CSS. If you write class="bg-white no-underline" you could easily write style="background: white; text-decoration: none;" and every frontend guy will understand it. I don't get the point.

If this article didn't make it click for you, that's understandable. It took me a long time of hearing about this & thinking it was stupid before it made sense. When that happens to me, it's usually a sign of something good. The author of Tailwind suggested I read his best effort at explaining why this makes sense.: https://adamwathan.me/css-utility-classes-and-separation-of-... Towards the end of the article it star…

Easier just to quote the reason he gives:

“With inline styles, there are no constraints on what values you choose... Utilities force you to choose...

You can't just pick any value want; you have to choose from a curated list. Instead of 380 text colors, you end up with 10 or 12.”

Re: Tailwind: style your site without writing any CSS

#73

Post by akvadrako »

mattferderer wrote: post #37
SunboX wrote: post #27

I really don't see the benefit. Sure, you don't write "CSS", but you write a lot of classes that look like CSS. If you write class="bg-white no-underline" you could easily write style="background: white; text-decoration: none;" and every frontend guy will understand it. I don't get the point.

If this article didn't make it click for you, that's understandable. It took me a long time of hearing about this & thinking it was stupid before it made sense. When that happens to me, it's usually a sign of something good. The author of Tailwind suggested I read his best effort at explaining why this makes sense.: https://adamwathan.me/css-utility-classes-and-separation-of-... Towards the end of the article it star…

I admit, after the middle of that article anything would look good.

It's a good realisation that there is no real separation of semantics and styling between HTML and CSS. XSL would have been one solution, but it was just too XML-ly. Personally I found it a joy; I could design my pages with pure semantics alongside a turing-complete stylesheet.

However now we have web components - your HTML and CSS are tightly coupled, but scoped. And the semantic / styling separation is provided by the shadow DOM. So no need to create inner platforms like Tailwind.

Re: Tailwind: style your site without writing any CSS

#74

Post by shubhamjain »

How would have React adoption looked like if it wasn't backed by a tech giant? React propounds a very controversial idea: to put HTML inside Javascript. Of course, once you get the hang of it, it all makes perfect sense: tight coupling and composability.

Tailwind, along the same lines, proposes a contrarian idea and it will only make sense once you start working with it. Here's what I have seen happen frequently: As the CSS grows, so does the bloat and repetitiveness of the same basic style. Let's say you want to position elements in the center of a component? "display: flex, align-items: center" easy. But what do you do when you encounter that same requirement again? Creating a utility class and replacing existing once will be a pain, so you add the same styles again. And that's how folks you end up with a megabyte of CSS doing a job that could be done in This pattern is more pervasive than you think. The fundamental problem is that we are not thinking about styling in terms of composability of basic styles.

The benefits of utility classes outweigh the cons. You can iterate faster, you don't have to fight the framework, you don't have rethink abstractions at every point ("this style belongs to a component or a utility class") and as CSS becomes more expressive you'll need fewer classes anyways. I hope Tailwind takes off because styling definitely needs to be less painful than it's today.

Re: Tailwind: style your site without writing any CSS

#75

Post by ukyrgf »

I've seen Tailwind pop up in some of the JAMstack starter kits, and I could have sworn it was some framework of yesteryear that I just missed that was now largely replaced by Bootstrap/Bulma/etc. Now that I've looked at the GitHub, I see v0.1.0 was released on Nov 1 2017! Some of these recent trends in web design really have me scratching my head, but I guess I'm just getting old.

Re: Tailwind: style your site without writing any CSS

#76

Post by LaGrange »

mkarnicki wrote: post #66
koboll wrote: post #16

Earlier quoted context omitted.

At that point, why not just write actual CSS?

Because you'll have 29 different margins, 67 different left paddings, etc all over the place. Tailwind allows you to create a consistent design system. CSS was supposed to be "write one class, use it everywhere instead of inlining". Usually it ends up with nobody reusing that class and everyone creating their on in the same codebase. There's an article I don't have a link handy, which explained how ridiculously many…

> Because you'll have 29 different margins, 67 different left paddings, etc all over the place.

That's not really the case since SCSS became a thing. If SCSS doesn't help you, Tailwind won't, you can ignore their classes just as you could ignore preset constants.

Honestly, to me it seems like people are just starting "fresh" with a benefit of some experience, and ascribing the benefits of experience to the tool.

Re: Tailwind: style your site without writing any CSS

#77

Post by peeters »

It's 2018, does CSS supported by modern browsers still lack the basic building blocks of reuse? Why am I being asked to choose between class="resources" (and having to know how to center a div in that resources class) and class="t:center t:wide-margins t:light-bg" (which is basically reintroducing all the harm of style tags). Why can't I, in 2018 and with vanilla CSS, say:

    .resources {
      @include .centered
      @include .wide-margins
      @include .light-bg
    }
It seems like every one of these styling tools is just polishing a turd that is a turd for no reason. I can't imagine why the above would be difficult, it wouldn't have to change anything about the actual application of CSS rules, it could literally just be a simple preprocessor.

Sure give me a library of common ways of doing something. That's great. But the lack of basic code reuse for CSS is staggering. Even if you're doing reuse with SASS you're stuck with the fact that you end up generating a CSS File that's 4-5 times larger than it needs to be.

Re: Tailwind: style your site without writing any CSS

#78

Post by draw_down »

dna113 wrote: post #67

Lol here we go again. Why does this get people so riled up? I suspect people who immediately dislike this maybe are not using some type of component-based UI. CSS classes are all about code-reuse. If you have the concept of say a "button" in your UI, and you are copying your button markup every where you use that "button" then it certainly makes sense to have a class for your button markup that encapsulates the style…

The problem isn’t how the author has used it, but using this approach for something that will grow and change over time. This is one of those things that seems really nice when you start, and gets uglier and uglier as time goes on.

If you see this enough times, and are tasked with cleaning it up/working with it, it can become difficult to appreciate it in the beginning too.

Re: Tailwind: style your site without writing any CSS

#79

Post by wishinghand »

dna113 wrote: post #67

Lol here we go again. Why does this get people so riled up? I suspect people who immediately dislike this maybe are not using some type of component-based UI. CSS classes are all about code-reuse. If you have the concept of say a "button" in your UI, and you are copying your button markup every where you use that "button" then it certainly makes sense to have a class for your button markup that encapsulates the style…

This can easily be accomplished with SASS and a methodology like BEM. And it makes the markup a lot easier to read.
Post reply on HN