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

Tailwind CSS marketing and misinformation engine

nuejs.org

Post reply on HN
Print view View original

41–50 of 125 posts

Re: Tailwind CSS marketing and misinformation engine

#41

Post by porker »

seanwilson wrote: post #32

> At some point, hundreds of utilities later, the code you've written doesn't look pretty. You start wondering what comes next after the utility-first step. How to clean things up? > Turns out there is no next step. Or it kind of exists, but it's called "premature abstraction". You can start extracting classes with @apply, but the documentation for reusing styles [link] describes it as a bad practice. > But what shou…

> Components and template partials solve this problem much better than CSS-only abstractions because a component can encapsulate the HTML and the styles.

One of the often overlooked dividers between those who like Tailwind and those who don't is whether your Web framework of choice has a concept of components.

Template partials with their lack of properties and a defined signature (hi autocomplete!) don't cut it in my experience.

Re: Tailwind CSS marketing and misinformation engine

#42

Post by darkhorse13 »

For me, Tailwind is great because it actually popularized utility classes. Sure, there were others that did it first, but the approach as a whole is widely accepted and seen as a productivity boost. I remember when this was thought of as a really bad idea when it's clearly not. Now I think I have written more CSS than a majority of the population[1], and for me, the most productive workflow is the following:

- Semantic class names for components like buttons, sidebars, etc.

- A wide range of utility classes to fill in the rest.

Utility classes (in my opinion) are absolutely the best way to handle different types of layouts, positioning, and spacing. Especially when it comes to overriding the component level ones from the semantic class names. This is not a novel approach by any means, I mean Bootstrap does it and it's still great.

[1] https://www.gethalfmoon.com

Re: Tailwind CSS marketing and misinformation engine

#43

Post by saasjosh »

The tech industry is full of thought leaders trying to sell us their inventions.

Adam should have said that Tailwind is a good solution for him. Instead, he said that Tailwind is better than everything else and piggy-backed on famous people in tech to sell his idea. Which created a cult-like following.

Cults are bad for tech because it prevents out-of-the-box thinking.

Re: Tailwind CSS marketing and misinformation engine

#44

Post by rahkiin »

tipiirai wrote: post #40
rahkiin wrote: post #35

Earlier quoted context omitted.

I dismissed most of the content because you’re missing a full css re-implementation of your primary class. It would have at least as many lines as the Tailwind classes and have extra blocks for before, for example. Either way, all these classes/css end up in a Button component for my site.

> at least as many lines as the Tailwind classes Have you ever used vanilla CSS? Please try to replicate that black button! You'd be surprised how much less it requires. No &>[data-slot=icon]]:-mx-0.5 or anything like that needed

I have for many years! And this block needs media queries and stuff for active and other states. That line you quote is .primary>[data-slot=icon] { margin-left: -0.5rem; margin-right: -0.5rem: }

Re: Tailwind CSS marketing and misinformation engine

#45

Post by marcotm »

I think that a huge part of Tailwind‘s success is not so much the underlying concept but a combination of several aspects: You get a kind of generic design system (margins, paddings, matching colors, etc.) that are restrictive enough to help make things look good and consistent but flexible enough to not result in a every-site-looks-the-same situation (at least not to the extent many other CSS frameworks did); Tailwind sits at a low level of abstraction above raw CSS that is just enough to make some CSS concepts a little bit easier to use (flex, grid, etc.); the documentation is quite good and getting started is relatively easy; …

Given these (and probably some more) aspects, Tailwind makes it easy to get some good results quickly which helps to convince users that their whole approach is the right way to go. Add very good marketing and early traction and you are where we are now.

So I agree with the article that Tailwind‘s conceptual approach is not the holy grail it‘s often said to be, but it maybe also is not even the reason for its success compared to many auxiliary things it did/does right.

Re: Tailwind CSS marketing and misinformation engine

#46

Post by asimpletune »

tipiirai wrote: post #2

Author here: This is probably the most important content piece I've ever written. Curious to hear your thoughts. Thank you!

I had a question for the author. Have you used Tailwind to build a project before? Or what has been your personal experience so far with the framework?

Re: Tailwind CSS marketing and misinformation engine

#47

Post by zarathustreal »

WA wrote: post #22
fock wrote: post #19

Earlier quoted context omitted.

so if I write into "style", I have all advantages of tailwind?

No. There is no inline style for @media, :hover etc.

Also inline styles are not GPU accelerated like CSS classes are, so there’s a performance difference too

Re: Tailwind CSS marketing and misinformation engine

#48

Post by tipiirai »

darkhorse13 wrote: post #42

For me, Tailwind is great because it actually popularized utility classes. Sure, there were others that did it first, but the approach as a whole is widely accepted and seen as a productivity boost. I remember when this was thought of as a really bad idea when it's clearly not. Now I think I have written more CSS than a majority of the population[1], and for me, the most productive workflow is the following: - Semant…

Makes sense. There are multiple reasons to group things and give them a semantic class name. And inline styling is a common practice to override parent styling. This is different from what Tailwind teaches us.

Re: Tailwind CSS marketing and misinformation engine

#49

Post by tipiirai »

rahkiin wrote: post #44
tipiirai wrote: post #40

Earlier quoted context omitted.

> at least as many lines as the Tailwind classes Have you ever used vanilla CSS? Please try to replicate that black button! You'd be surprised how much less it requires. No &>[data-slot=icon]]:-mx-0.5 or anything like that needed

I have for many years! And this block needs media queries and stuff for active and other states. That line you quote is .primary>[data-slot=icon] { margin-left: -0.5rem; margin-right: -0.5rem: }

And you still need 60+ lines to create a button like that?

Re: Tailwind CSS marketing and misinformation engine

#50

Post by unculture »

Option 1: Find a visual error, open devtools, find the nearest most descriptive class or id (.primary? Oh no…), open IDE, global search in styles folder structure (most likely but not the only place to find CSS) for “.primary”. 40 files returned. After 15 minutes find a file that looks like it might be the right one. 10 minutes to understand the CSS (lots of advanced CSS in here…). Find the cause of the visual error, make the 1 line change. 30 minutes - job done.

Option 2: Find a visual error, open e.g. React Devtools, find the component name, open the IDE, find the component source file, find the HTML, change the utility style class, job done - 5 minutes.

These are not contrived examples. I had a one liner take 40 minutes to find in a codebase a couple of weeks ago. Not an exaggeration.

I really used to believe in separation of concerns but I don’t any more, because of all the time I’ve had to spend fighting with “option 1” codebases over the years. Pretty much any big codebase with normal CSS is going to be an “option 1” eventually unless it’s the work of a single good CSS developer (rare skill), or a team where someone who’s a good leader also cares about CSS enough to enforce a convention like BEM in perpetuity (even rarer skill).

Anyone building anything complex these days is using some component abstraction - whether it’s client side or not - to manage complexity. May as well make use of it for styles if it’s already there.

The reason that there’s a backlash against separation of concerns, the cascade, and (low) specificity is that each of these things is a complete disaster for maintainability in the long run.

One note in making an example of that Catalyst button. If you wrote out all the styles required to do the amount of work that button is doing it would also be extremely difficult to understand, and what’s more, it’d be in a completely different file to the single thing that gives it any meaning - the HTML.

Post reply on HN