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

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

381–390 of 448 posts

Re: Tailwind CSS v3.0

#381

Post by 946789987649 »

ggregoire wrote: post #221

As always when anything about Tailwind gets posted on HN… 200 comments so far and (almost) not a single one about the actual blog post. Looking at the new features, I wondered why they went with a major version bump, but seems like it's because the Just-in-Time engine released in Mars as a feature flag is now the default engine, which is a pretty big change by itself.

I don't think this is a tailwind specific thing. I see this happen with almost every framework/language update. There's more people who know about a language than people who know the language. So it will obviously deviate more to them.

Re: Tailwind CSS v3.0

#382

Post by CRConrad »

aniforprez wrote: post #371
winstonewert wrote: post #317

Earlier quoted context omitted.

For me, the situation is: I gave tailwind a try. I hated it. I spent a lot of effort of ripping every last tailwind class out of my project. And yet, a lot of people swear by it and think its great. This really confuses me, and I'd kind of like to understand: how can other people like this thing that I think is terrible?

> how can other people like this thing that I think is terrible Cause it works for them? You cannot be the arbiter of what other people like or don't I hate CSS and I find the TW classes being right there with the HTML more helpful than class-hunting through a bunch of CSS files. React solves that somewhat with styled components now. I like having design guidelines set loosely about things rather than writing reams o…

> You cannot be the arbiter of what other people like or don't

That's not necessarily what the GP said. The charitable reading is that they're genuinely, open-mindedly, asking what they're missing that's so great about it, so they too might get to love it.

Hey, maybe your explanation above does the trick.

Re: Tailwind CSS v3.0

#383

Post by sibit »

burlesona wrote: post #174

I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following: 1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color v…

I agree. I used Tailwind for roughly six months on a few projects before I noticed that I was only using the basic utility classes. I didn't like all the screen sizes and state "bloat" classes so I decided to take the best parts (margins, padding, background, font, text alignment) and create a simple CSS framework.

For anyone interested, you can find it at: https://brixi.dev/

Re: Tailwind CSS v3.0

#384

Post by 734129837261 »

bschne wrote: post #353

For those wondering "but separation of concerns!" or "but code reuse!", the dev behind Tailwind wrote a post about his thinking around this, which IMO makes quite a lot of sense, a while back: https://adamwathan.me/css-utility-classes-and-separation-of-...

The problems he's tackling weren't problems, and his solutions are a bombardment of utility class names in your HTML, rendering it extremely and unnecessarily verbose. It makes the HTML less intuitive to read, too. A `` is clearly a container for a user profile, a `` tells you absolutely nothing about what the hell is going on.

I fucking LOVE CSS and Tailwind is an insult to the craft.

Those who love Tailwind tend to not understand CSS beyond the basics, is what I've learned. Those who hate Tailwind know CSS inside and out.

To each their own, but this example from their own homepage makes me want to vomit:
Like what the actual flying fuck. This is inline CSS, period. And that's wrong, always. Tailwind makes me mad and angry because I love front-end development, I love CSS, and everything about this feels like a mentally challenged person spitting me in my face. Nothing I can do about it, they are challenged after all, but damnit it's annoying.

Re: Tailwind CSS v3.0

#385

Post by hbn »

lewispollard wrote: post #377
lhorie wrote: post #247

Earlier quoted context omitted.

Yes, @apply exists, but is generally discouraged (and the rationales are given right on that page) > If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you Approaching it with moderation is probably worth trying though

It's the same as any DRY or optimised code: taking time and effort to make things overly DRY or optimised up front is a waste, building stuff out and then refactoring when you realise it's going to be repeated is a better workflow. With tailwind, that's simple because you take your string of class names, slap an @apply on it, and then use the new classname instead. No, it's not significantly different from just writi…

I'm pretty sure the creator's intention is that you basically don't use @apply at all, except maybe edge-cases where Tailwind simply can't be used (for example, I think before v3.0 you couldn't set print styles, i.e. @media print)

The intended method of not repeating yourself in Tailwind is using a framework, and writing the styles in the template of the component.

Re: Tailwind CSS v3.0

#386

Post by CRConrad »

weakwire wrote: post #55
skellera wrote: post #42

Earlier quoted context omitted.

When did playful become offensive?

Because by definition offensive has to do with how people receive something. I love the library, will continue using and donate, I would prefer the docs not to assume that people that print papers are animals. That's all! Take it or leave it.

But people are animals. Apes, to be specific.

Re: Tailwind CSS v3.0

#387

Post by hbn »

hiimshort wrote: post #284

I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive. However, those were new projects…

We use Tailwind at my work and I personally find hopping into the template of a file I've never been in before super easy with it. With normal CSS I've usually got an HTML file and a CSS file side-by-side in my IDE, and I'm cross-referencing awkwardly-named classes in the template with a stylesheet. Sometimes these styles might be coming from a local, dedicated stylesheet, sometimes they might be coming from a global stylesheet that I might end up needing to grep through the project for in order to find where these styles are coming from.

With Tailwind, I see a , and I see all the styles on it, right within the template. I don't need to follow class names, or cross-reference between files, it's just there, where I'm already looking.

Re: Tailwind CSS v3.0

#388

Post by rendall »

seanwilson wrote: post #121
z3t4 wrote: post #101

Earlier quoted context omitted.

The trick with CSS is to write semantic HTML and avoid div, span and css classes. You can of course inline css too (used mostly for optimization to prevent layout shift, but is also fine for elements/classes that are not repeated, such as the top menu, top banner/intro and header/footer)

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

> "CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs..."

This is untrue by any measure.

This might have been true in the days before flex or grid, but with those additions, there is no need for extraneous styling divs.

> "...and classes that are only there for styling."

That part is confusing. Classes? As in CSS classes? CSS has no other purpose than styling.

Re: Tailwind CSS v3.0

#390

Post by hbn »

734129837261 wrote: post #384
bschne wrote: post #353

For those wondering "but separation of concerns!" or "but code reuse!", the dev behind Tailwind wrote a post about his thinking around this, which IMO makes quite a lot of sense, a while back: https://adamwathan.me/css-utility-classes-and-separation-of-...

The problems he's tackling weren't problems, and his solutions are a bombardment of utility class names in your HTML, rendering it extremely and unnecessarily verbose. It makes the HTML less intuitive to read, too. A ` ` is clearly a container for a user profile, a ` ` tells you absolutely nothing about what the hell is going on. I fucking LOVE CSS and Tailwind is an insult to the craft. Those who love Tailwind tend…

> A `` is clearly a container for a user profile, a `` tells you absolutely nothing about what the hell is going on.

You know what's going on if you're in a component called user-profile.component.html

How often are you writing something like a user profile component in the context of something much larger? Also, what styles would the class "user_profile" even have? You say the second one "tells you nothing about what's going on," but I'd say it's the opposite. If you actually put real tailwind classes in the second one, I'd know exactly how that div is styled whereas the first one requires cross-referencing another file.

"user_profile" probably has CSS implementation that have almost nothing to do with a user profile. It's probably a container that has maybe a margin, a max-width? The important styling details all come from the inner HTML and stylings on those things. So your "user_profile" class is mostly just another generic wrapper that you had to come up with a name for.

Post reply on HN