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

31–40 of 185 posts

Re: Tailwind: style your site without writing any CSS

#31

Post by Raphmedia »

Sounds to me like the author should simply use SASS + a good autocomplete feature in their IDE.

When I write CSS, I use a lot of shortcuts. I simply write "mt5" and then press tab, it then auto completes to "margin-top: 5px;". If I write "tdu"+tab and then it goes "text-decoration: underline;". The IDE also shows me in a drop down all the options that can be used after writing "text-decoration".

Changing standards because you do not want to learn or remember something is the perfect example of programmer "laziness". Why remember this super common language when instead I can develop and remember a new obscure abstraction instead?

Re: Tailwind: style your site without writing any CSS

#32

Post by davidwparker »

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.

Did you read the article? There's a header titled "why is this different from inline styles?" that addresses your specific question.

Re: Tailwind: style your site without writing any CSS

#33

Post by mbrock »

Raphmedia wrote: post #31

Sounds to me like the author should simply use SASS + a good autocomplete feature in their IDE. When I write CSS, I use a lot of shortcuts. I simply write "mt5" and then press tab, it then auto completes to "margin-top: 5px;". If I write "tdu"+tab and then it goes "text-decoration: underline;". The IDE also shows me in a drop down all the options that can be used after writing "text-decoration". Changing standards be…

Oh no, laziness! Someone is doing something in an easy and convenient way that somehow doesn't match up with other people's ideals of conceptual purity! :'(

Re: Tailwind: style your site without writing any CSS

#34

Post by ghostly_s »

Isofarro wrote: post #30
judofyr wrote: post #21

Earlier quoted context omitted.

It's based on how often you use a helper. For instance, changing letter spacing is verbose ( https://tailwindcss.com/docs/letter-spacing ) as it's not something you use that often. Tweaking spacing is very common and "padding-horizontal-2" uses an awful amount of characters.

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 a decision to optimize write-ability, not readability. Not sure why this is so puzzling.

Re: Tailwind: style your site without writing any CSS

#36

Post by androidgirl »

I really like these atomic/functional css libraries with any sort of frontend framework or templating system that leverages components.

Personally, I have been using Tachyons with React for the past couple months, and it's been a blast. Compared to writing html templates with Emmet and css with Sass, I feel as if I am more productive and like I can reuse more components.

It's worth a try if it interests you!

Re: Tailwind: style your site without writing any CSS

#37

Post by mattferderer »

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 started clicking for me.

Re: Tailwind: style your site without writing any CSS

#38

Post by wpietri »

wolco wrote: post #17

I have trouble with the following statement. Complete flexibility is a bad thing? If I accept that how is limiting options to 30 not providing too much flexibility? "Limits & standards. With normal CSS, I can make any element any width I want. For me, this is not a good thing! With tailwind, there are only 30ish options for width"

That's the nature of any higher-level language: you reduce flexibility and gain ease of use for particular use cases.

E.g., With Ruby and Python and Java you lose a lot of the flexibility that pure C gives you. You can't directly manage memory directly any more, for example. Is that a bad thing? Not for most people.

Note also that one of the major goals of an operating system is to limit flexibility. The first thing an OS does on starting is to lock a bunch of functionality away from any other code. Similarly, virtualization and containerization are mainly about removing capability.

Re: Tailwind: style your site without writing any CSS

#39

Post by deltron3030 »

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 treat your stylesheet as your style guide, design system, or single source of truth. That's where you define your fonts, colors scales etc.

So you actually don't have to think about specific widths while you're building, you reference a width that is already set up in your stylesheet!

I find that it improves the design to dev workflow. You experiment with design in a design tool like Sketch, and then translate your final idea or rules into a stylesheet, which is the basis for your live prototyping in editor & browser (wrapping HTML elements and referencing styles in your stylesheet).

Re: Tailwind: style your site without writing any CSS

#40

Post by Raphmedia »

mbrock wrote: post #33
Raphmedia wrote: post #31

Sounds to me like the author should simply use SASS + a good autocomplete feature in their IDE. When I write CSS, I use a lot of shortcuts. I simply write "mt5" and then press tab, it then auto completes to "margin-top: 5px;". If I write "tdu"+tab and then it goes "text-decoration: underline;". The IDE also shows me in a drop down all the options that can be used after writing "text-decoration". Changing standards be…

Oh no, laziness! Someone is doing something in an easy and convenient way that somehow doesn't match up with other people's ideals of conceptual purity! :'(

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, we don't believe that a dogmatic utility-only approach is the best way to write CSS.”

Read this page: https://tailwindcss.com/docs/extracting-components/

A class based rapid prototyping framework is a powerful tool, don't get me wrong. However, like all tools you should only use them when they truly are needed.

Post reply on HN