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

Why Tailwind CSS Won

matt-rickard.com

Post reply on HN
Print view View original

401–410 of 559 posts

Re: Why Tailwind CSS Won

#401

Post by 3cats-in-a-coat »

jonwinstanley wrote: post #389
3cats-in-a-coat wrote: post #343

Earlier quoted context omitted.

Technology choices, and life's choices in general are like a spectrogram of different wavelengths with positive and negative values... Like "this will help you today, but bite you in the rear tomorrow", or "this will help you tomorrow, but be annoying today". And it also varies by different conditional developments, if this happens, if that happens, can you implement a change, or the solution is "write-only" and so o…

What makes you think tailwind would be hell in the future though? It's just a load of classes on html elements. Maintenance is pretty easy. I do agree with you on the headline though, of course tailwind hasn't won anything!

First, the site uses some weasel language to speak about how much they're "focused on performance" in such a way as you think Tailwind is literally faster than doing normal CSS. It's not. It's a heavy approach and while you can always find edge cases to the contrary, in general it leads to pages that add lag and load to people's devices.

If you have a very simple page this doesn't matter, but as your site/business grows, it does.

Second, Tailwind obviously promotes a ton of repetition in the same way that using presentational attributes from the 90s and style="" does. This not only adds, again, burden to the CSS engine and DOM, but this "ease of copy pasting" that the author boasts about in the linked blog means you can easily end up with tons of subtle or not so subtle inconsistencies in your site's code and components, UI.

Copy pasting is easy. But there's a reason why we define classes, functions, modules, and reuse them, instead of copy-pasting our code everywhere. Copy pasting is a strategy for a quick start and a very short journey as you paste more and more variations of what you're trying to do around your site. Now change them all consistently. Oh shit, I guess... find/replace + regex? This works sometimes, but it's a deeply unserious approach to change management in an application/site at scale, and means your velocity and quality both will suffer.

I'm aware of the way to define custom classes as sort of "components" in Tailwind, but at this point... you're literally using Tailwind as you would CSS, but with a ton of indirection, gibberish, and very very unclear precedence/specificity rules.

You will also get many people complaining about compilation speed for larger sites. A problem that is quite bizarre to have for styling with a language that doesn't require compilation when you use it in a sane way (and SASS etc. are extremely fast and don't have this problem, there's even a Rust SASS parser I believe, that's even faster).

Tailwind also severely restricts your precision and expression. I probably don't have to explain the limitations of inline styles when those styles have to change from user interaction, or for different devices, and container size and so on. Tailwind makes all this extremely bizarre, if it addresses it at all. In "plain" CSS (and other more reasonable tools like SASS), it's trivial.

Re: Why Tailwind CSS Won

#402

Post by _pdp_ »

You can just write your own styles and then use @apply ; inside if you have the right tools. I am not sure what is this commotion about. I think that most of the critique comes from people who have never used tailwind before hence it looks foreign and grotesque to what they already know, i.e. CSS.

Re: Why Tailwind CSS Won

#403

Post by JeremyNT »

keyle wrote: post #140

Gray beard's 5c: Tailwind is a farce and a catastrophe. It's as modern as the style parameter is, and it's as reusable as a moving a dirt pile from one corner to the next. You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. It amuses me when a library is implemented 'with tailwind', which means it's totally useless to the people _not using tailwind_,…

I'll take this anecdote and counter it with the success of Bootstrap. You could have been using it for an entire decade now. There's a robust ecosystem around it to this day.

Tailwind as the "new bootstrap" makes a decent amount of sense.

These frameworks aren't an excuse to ignore and misunderstand the underlying technology. It's worth understanding CSS, but these abstractions can really speed up development time, especially if your job involves more than "front end development" (which is still true for many of us).

Re: Why Tailwind CSS Won

#404

Post by ethanbond »

emmacharp wrote: post #294
ethanbond wrote: post #282

Earlier quoted context omitted.

Just checking that I understand your suggestion: it’s that you copy/paste Tailwind into a file called “designsystem.css” and then say that you are not using Tailwind? Or are you saying take their design system and use your own syntax for it (so it’s less complete than TW, less well-documented, and less transferable to/from the vast resources of the internet centered around TW)?

I'm talking about the design aesthetics included in Tailwind as default. Keep the values and the names if you want. Like this, for example: "blue-500" becomes --blue-500. That's it. This is a far cry from using Tailwind as a whole while keeping the good-looking aesthetics.

Sure now do the same for: whitespace (margins and padding), border radiuses, shadows, opacities, font sizes, font weights, and continue playing whack-a-mole as you run into new cases.

Or just use the extremely complete, well-considered, well-defaulted, well-documented, well-supported, always-improving set of classes that took you zero hours of initial setup and will cost you zero hours of maintenance outside of your own use/application until the end of time. And it has a name so when a new engineer joins your team, you can say "we use Tailwind, go to tailwindcss.com" and they are fully read into your setup in about 15 seconds.

Re: Why Tailwind CSS Won

#405

Post by shadowfoxx »

I strongly disagree with the usage of context-switch here. If you're writing HTML + CSS or writing HTML + Tailwind classes that's the same context. Maybe my experience with CSS is partly to blame - I can see a design and have both the HTML and CSS in my noodle at the same time because they are coupled. The phrase will lose all meaning if we're comfortable with, "Anytime I look at a different file" as a clean definition for context switching. So If I ctrl+click to read a function that I've imported or I'm checking out the type definitions for a parameter - that's context switching??

To me, this would be like saying writing a function in a React component and then writing the HTML for that same component is context switching. It just doesn't stand up to scrutiny. The tasks are related and in a similar headspace - even if they aren't connected 1:1.

Re: Why Tailwind CSS Won

#406

Post by throwaway154 »

jonwinstanley wrote: post #280
llamaimperative wrote: post #200

Earlier quoted context omitted.

None of this mirrors my experience whatsoever. That’s “how things are” for me. I know CSS very well and Tailwind is probably the largest productivity boost I’ve encountered since, I don’t know, learning vim? It’s way faster than SASS/SCSS which is itself way faster than raw CSS. It also yields far more self-contained and more readily composable components than any other styling mechanism. Your comment doesn’t resonat…

I think I'm pretty good at CSS and have been using it for maybe 15 years. I find tailwind just makes my life easier. Sure, it's not perfect, but I really don't enjoy giving every div and container it's own unique name and hoping none of the names ever clash with my colleagues unique names etc. Also, I came to realise that websites never strictly follow the same design rules throughout. There are always exceptions. So…

You don't need to give every div and container a unique ID. Why ever do that? Many things never need their own ID.

Are tons of divs and containers needed? When I find myself needing containers I usually find out I've not been thinking about arrangement very well.

Re: Why Tailwind CSS Won

#407

Post by nkohari »

weo3dev wrote: post #383
blitz_skull wrote: post #267

Earlier quoted context omitted.

Cool hot-take but it’s not true. You’re literally learning CSS when you learn tailwind. And no one (good) picks up a tool solely because it’s shiny, they pick it up because they find it has utility, which evidently LOTS of people do. And if you don’t think it’s reusable then you at least need to bring an argument for why that’s so because the docs, personal anecdote, and the opinion of LOTS of people is completely op…

I vehemently disagree. When you're using tailwind, you're learning Tailwind, which is using CSS in absolutely the unequivocally anti-CSS way. CSS was meant to cascade; it's what the damn 'C' stands for, and if you cannot understand the efficiency of the cascade, at scale, you are most definitely missing the entire point of CSS. I have personally built ui libraries for boutique firms and enterprise (Apple) firms and g…

There's a strong contingent of developers who would argue that the global-by-default aspect of CSS was a mistake. Hence nested selectors in Sass/SCSS, CSS modules, and so on.

Styles applied by Tailwind classes cascade. The library just makes it (intentionally) difficult to define a class that will easily collide with others.

Re: Why Tailwind CSS Won

#408

Post by boplicity »

in9 wrote: post #394

Folks, while we are at it, what is the best way to learn proper front end for a hobbyst? I'm a decent programmer and work with databases and backend technologies. I want to be able to build simple front ends for the stuff I work on. I've been meaning to dive into D3, but the tutorials for basic front end stuff assume I'm really starting from scratch. But what I'm blocked by is 1) what is a nice workflow for developme…

The biggest thing to worry about, IMO, if you're just working on your own on hobby projects is long-term maintainability. This gets down to tooling, which can be horrible over the long term.

Tools get updated constantly, packages get updated constantly, breaking changes get made almost constantly. Five years from now, your packages probably won't work, and it will be almost impossible to work on a project -- unless you've been maintaining it over the past five years. If your product is your business, of course you're maintaining it. But if it's just a hobby you want to work on sometimes -- then you want to be able to abandon it and then come back later without the pain of figuring out why you can't compile your SCSS, javascript, or similar things.

Re: Why Tailwind CSS Won

#409

Post by nkohari »

yoav wrote: post #304
blitz_skull wrote: post #267

Earlier quoted context omitted.

Cool hot-take but it’s not true. You’re literally learning CSS when you learn tailwind. And no one (good) picks up a tool solely because it’s shiny, they pick it up because they find it has utility, which evidently LOTS of people do. And if you don’t think it’s reusable then you at least need to bring an argument for why that’s so because the docs, personal anecdote, and the opinion of LOTS of people is completely op…

Senior Staff grey beard: Counterpoint: The C in CSS stands for Cascading. So you’re not learning CSS. You’re learning Tailwind specific classnames that expand to non-cascading style rules.

Styles applied by Tailwind cascade like any other styles.

Re: Why Tailwind CSS Won

#410

Post by llamaimperative »

throwaway154 wrote: post #406
jonwinstanley wrote: post #280

Earlier quoted context omitted.

I think I'm pretty good at CSS and have been using it for maybe 15 years. I find tailwind just makes my life easier. Sure, it's not perfect, but I really don't enjoy giving every div and container it's own unique name and hoping none of the names ever clash with my colleagues unique names etc. Also, I came to realise that websites never strictly follow the same design rules throughout. There are always exceptions. So…

You don't need to give every div and container a unique ID. Why ever do that? Many things never need their own ID. Are tons of divs and containers needed? When I find myself needing containers I usually find out I've not been thinking about arrangement very well.

If the options are "never encounter a problem" versus "when I encounter a problem I realize that it's actually a superficial symptom of a more substantial problem someone made hours/days/weeks/months ago," I will take the former 100% of the time.
Post reply on HN