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

111–120 of 185 posts

Re: Tailwind: style your site without writing any CSS

#111

Post by Raphmedia »

corobo wrote: post #100
Raphmedia wrote: post #90

Earlier quoted context omitted.

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.

So you're just talking in terms of visual bloat? On this page it documents how you can create component classes https://tailwindcss.com/docs/extracting-components/ Button Then in your style .btn-blue { @apply bg-blue text-white font-bold py-2 px-4 rounded; } .btn-blue:hover { @apply bg-blue-dark; }

The problem with granular classes is that you project won't scale in an efficient way. It also makes refactoring almost impossible.

On a small one page website, do use them. However in something more complex like an e-commerce website theme or a complex web app, you will regret it quickly.

is no better than

It is simply a fancy way to use inline styles.

One of the selling points of CSS is the ability to scale and refactor very quickly and easily. Class based frameworks remove all those benefits. Extracting components and building sementically is the solution. As I said in my previous comment, that framework they are using supports it. They say it themselves:

    “*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.*”
I have worked on many contracts where the client came to us because their current web agency wanted to charge crazy prices to refresh their website's design (e-commerce websites change at least one a year). Almost every time, those projects are a pain for both the team and the client because the previous developer decided to be lazy and use classes or inline styles everywhere.

Re: Tailwind: style your site without writing any CSS

#113

Post by jacamat »

paulsutter wrote: post #71
mattferderer wrote: post #37

Earlier quoted context omitted.

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.”

in what way is that consistent tho?

Re: Tailwind: style your site without writing any CSS

#114

Post by nihonde »

colonelpopcorn wrote: post #101
stefanfisk wrote: post #83

Earlier quoted context omitted.

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.

We're back to filling in style attributes on each tag, aren't we?

Not quite, because you can still define thematic defaults and change those globally to suit any changes to your style book.

Re: Tailwind: style your site without writing any CSS

#115

Post by vntok »

corobo wrote: post #100
Raphmedia wrote: post #90

Earlier quoted context omitted.

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.

So you're just talking in terms of visual bloat? On this page it documents how you can create component classes https://tailwindcss.com/docs/extracting-components/ Button Then in your style .btn-blue { @apply bg-blue text-white font-bold py-2 px-4 rounded; } .btn-blue:hover { @apply bg-blue-dark; }

  .btn-blue {
    background:blue; color:white; font-weight:bold; padding: 
  4px 2px; border-radius:50%
  }

Re: Tailwind: style your site without writing any CSS

#116

Post by Raphmedia »

jherdman wrote: post #60
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…

The project in question uses PostCSS, which is to CSS as Babel is to Javascript. The point of a broad set of utility classes is to have predefined and discrete classes that map to conventions your application uses. Here's a few examples from an app I use: .u-colorPrimary { font-color: var(--utils-css-c-primary) !important;; } .u-textSmall { font-size: 0.75rem; } Each of these are a "standard" that we use throughout t…

This way is great, it's not the one I use but I have no issue with it.

I prefer to use SASS variables along with a strict build system that refused to build if the developer isn't using variables that are injected via a config YAML file. In the end, we are both working in a similar way.

That being said, ".u-colorPrimary" is great. You can easily refactor it and it should scale well. However, ".bg-orange" and ".text-white" aren't great.

This button from the article is really bad:
They should at the very least made a component with the styles and then apply via ".button" class.

Re: Tailwind: style your site without writing any CSS

#117

Post by gnulinux »

majewsky wrote: post #54
ghostly_s wrote: post #34

Earlier quoted context omitted.

It's a decision to optimize write-ability, not readability. Not sure why this is so puzzling.

It's puzzling because the same people then shit on Perl for being "write-only".

I agree with your sentiment. I think this is because half the programmers like mnemonics and the other half prefers English, so no matter what you do people criticize your choice. People call Java verbose and perl write-only.

Re: Tailwind: style your site without writing any CSS

#118

Post by [deleted] »

err4nt wrote: post #105
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…

What's wrong with class="centered wide-margins light-bg"? It would do the same as what your .resources class looks like it might do, and it's supported everywhere already.

[deleted]

Re: Tailwind: style your site without writing any CSS

#119

Post by Tade0 »

wes-k wrote: post #103
Tade0 wrote: post #47

Most (all?) of the classes apply exactly 1 line of CSS. I see this as an anti-pattern, because to me it looks like inline styles with extra steps. The only thing it avoids is accidental strong specificity. The reason we have CSS is that it's really easy to make HTML unreadable - after all it's essentially a 1D medium(lines of text) trying to describe a 2D space.

Inline styles = open ended, while classesrestrict you. Also this is switching things around. Now your html depends on your css classes and not your css depending on your html. No more broken css when a dev modified the html structure and didn’t realize that one of the hundreds of lines of css now doesn’t get applied right.

No more broken css when a dev modified the html structure and didn’t realize that one of the hundreds of lines of css now doesn’t get applied right.

You can achieve the same, but with much less clutter using BEM. Or even better: BEM + SASS.

Re: Tailwind: style your site without writing any CSS

#120

Post by jacamat »

ssijak wrote: post #52
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…

Key word is “dogmatic”.

No, the key phrase is, "We don't think this is the best way to write CSS."
Post reply on HN