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

81–90 of 185 posts

Re: Tailwind: style your site without writing any CSS

#81

Post by ealhad »

peeters wrote: post #77

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 .wi…

In 2018 with postcss, you can have the following:

    .resources {
      @apply centered wide-margins light-bg;
    }
And that's exactly what Tailwind is about, btw!

Sadly, as you point, it's not vanilla. It works, though.

Re: Tailwind: style your site without writing any CSS

#82

Post by davnicwil »

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…

If you're interested, I wrote a short blog post recently with some very similar thoughts on the role of classes vs inline CSS in the component paradigm.

https://medium.com/@davnicwil/how-i-learned-to-stop-worrying...

Tldr: for me, classes make more sense for reuse in simpler content-heavy scenarios. For anything remotely complex or webapp-like, I think they are the wrong abstraction.

Re: Tailwind: style your site without writing any CSS

#83

Post by stefanfisk »

wishinghand wrote: post #79
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.

after doing a project with tailwind I have completely abandoned the idea of BEM. while it was nice having clean classes, having the styles directly in the html is way easier to reason about.

Re: Tailwind: style your site without writing any CSS

#84

Post by stefanfisk »

LaGrange wrote: post #76
mkarnicki wrote: post #66

Earlier quoted context omitted.

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.

I've used SASS for years, and yet switching to tailwind felt reaaally nice. have you tried it for yourself, or are you just assuming that you understand the practical differences?

Re: Tailwind: style your site without writing any CSS

#85

Post by dna113 »

wishinghand wrote: post #79
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.

If you prefer that great, which is why I said that I don't think it makes a huge difference one way or another.

.i-dont__find-bem--very-readable.

Re: Tailwind: style your site without writing any CSS

#86

Post by Lennu »

These packages are really useful for small to medium sized projects where you need little to no customization! When you do need something greater than what the package can provide then I find it better to use something else because these tend to pollute the namespace and things in my experience get really complicated when you start adding your own stuff with them, or modifying them.

Even though they are compact you probably end up having lots of unused CSS code in your website.

Re: Tailwind: style your site without writing any CSS

#87

Post by Isofarro »

judofyr wrote: post #63
Isofarro wrote: post #30

Earlier quoted context omitted.

In what context is this "an awful amount of characters" an issue? GZip compression is fairly standard these days, and languages based on plain english (or similar languages) has a better level of compression than random text because of repetitive nature of sequences of characters. I can't believe that mnemonic based languages are easier and more readable than something closer to a natural language. And with the assum…

It's an awful amount of characters once you multiply it. For instance, the first example ( https://tailwindcss.com/docs/what-is-tailwind/ ) would be twice as big: After spending more than, say, two hours with Tailwind you'll probably read the first line much faster than second one (since there's less to read and you don't need to scroll). Humans are very good at pattern recognition, and you'll quickly read "mb" as a…

Ah, I see your issue: you do know you can have whitespace inside attributes? You don't have to clump all the class names on one line. Scanning vertically is quicker than through the horizontal line-noise of both your examples.
This also has the benefit too, that if you use version control line-based diffs to see what's changed, it will highlight the specific css class name that changed. Handy if you need to ensure that whenever you change the bottom margin, you can see at a glance whether the small prefixed one has been updated too.

On the other hand if you regularly need that many classes to style an element, perhaps it's a good place to refactor commonly occurring class names into a set, and label that set with a meaningful identifier.

As for mathematical notation, it's about as understandable to me as my understanding of Hanzi.

Re: Tailwind: style your site without writing any CSS

#88

Post by stefanfisk »

poof_he_is_gone wrote: post #69

I prefer the hybrid approach, having a mix constantly repeated utility styles for things like padding, margin, floats, and colors, and then having custom SCSS/CSS for the rest.

that's what tailwind does, look into the components docs. essentially utilities vs components are a matter of definition order, such that utilities can always override components.

Re: Tailwind: style your site without writing any CSS

#89

Post by wishinghand »

PunchTornado wrote: post #20

I don't understand how this works. Say you want a div to be a specific width: 135px, how do you make it without writing any CSS? Or you want a specific shade of a colour? Or you want to style things that are not in your html (third party widgets).

You can't. It's easier to see what classes are included here: http://nerdcave.com/tailwind-cheat-sheet

but if you want something not provided explicitly by Tailwind, you have to write it yourself.

Re: Tailwind: style your site without writing any CSS

#90

Post by Raphmedia »

corobo wrote: post #65
Raphmedia wrote: post #40

Earlier quoted context omitted.

Bloating your markup with classes is simply a bad habit. It bites you hard in the long run. Even the framework that they are using proposes better alternatives. “ Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction. While we strongly believe you can get a lot further with just utilities than you might initially expect, w…

Could you suggest how it's bloating the markup and how it'll bite you in the long run? I understand that maybe adding a bunch of classes for every element will increase the overall size of the page but if it's served with gzip compression doesn't it actually (maybe only technically) work better to have repetitive classes everywhere instead of unique class names?

Adding some classes is alright. Things like "row", "column-6" are tolerated evils.

Look at the button from his article:

Buy for $10

That's way too granular.

Post reply on HN