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

Tailwind CSS v4.0

tailwindcss.com

Post reply on HN
Print view View original

81–90 of 296 posts

Re: Tailwind CSS v4.0

#81

Post by tipiirai »

Foreignborn wrote: post #69
tipiirai wrote: post #64

Earlier quoted context omitted.

> I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * S…

Tailwind has solved a lot of problems. And this is coming from someone who doesn't use it half the time. Some thoughts about this topic, not necessarily in disagreement: - Designers seldom think in the way you describe (explicit computer-readable rules, systems of design). A lot of designers are coming from crafts that are more implicit. It doesn't surprise me design business logic is not the topic of conversation. -…

I'm a designer, so I absolutely think in terms of design systems where typography is just one part of the puzzle. There are, of course, many ways to set type — but the point was: no Tailwind engineer talks about typographic scales in the first place. Systematic thinking is absent, which is naturally built in CSS.

Re: Tailwind CSS v4.0

#82

Post by tipiirai »

rayrrr wrote: post #78

To some extent, reading between the lines of many of these comments, I think “pure CSS” designers are feeling threatened by the quality level of Tailwind sites designed by the rest of us.

It's worse. React killed the craft of design engineering because everything is JavaScript. CSS develoeprs are gone.

Re: Tailwind CSS v4.0

#83

Post by threatofrain »

tipiirai wrote: post #81
Foreignborn wrote: post #69

Earlier quoted context omitted.

Tailwind has solved a lot of problems. And this is coming from someone who doesn't use it half the time. Some thoughts about this topic, not necessarily in disagreement: - Designers seldom think in the way you describe (explicit computer-readable rules, systems of design). A lot of designers are coming from crafts that are more implicit. It doesn't surprise me design business logic is not the topic of conversation. -…

I'm a designer, so I absolutely think in terms of design systems where typography is just one part of the puzzle. There are, of course, many ways to set type — but the point was: no Tailwind engineer talks about typographic scales in the first place. Systematic thinking is absent, which is naturally built in CSS.

I'm kind of surprised why this is even relevant to you. The designers I know work in Figma. The designer and the engineer collaborate to make sure the design isn't too hard to implement, but other than that the designer shouldn't care about whether developers are using Tailwind, StyleX, Sass, vanilla, or whatever.

I hardly expect a designer to take responsibility for something as transient and idiosyncratic as "oh, but this is hard in Tailwind."

Re: Tailwind CSS v4.0

#84

Post by jitl »

tipiirai wrote: post #82
rayrrr wrote: post #78

To some extent, reading between the lines of many of these comments, I think “pure CSS” designers are feeling threatened by the quality level of Tailwind sites designed by the rest of us.

It's worse. React killed the craft of design engineering because everything is JavaScript. CSS develoeprs are gone.

Design engineers still exist, they just write more JS these days. They are still building UI and design systems and teaching craft & supporting full stack teams. The craft is there, but the tools are different.

Re: Tailwind CSS v4.0

#85

Post by 4m1rk »

jaredcwhite wrote: post #39

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…

I just want the color palette of the Tailwind CSS.

Re: Tailwind CSS v4.0

#86

Post by sibeliuss »

jaredcwhite wrote: post #39

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…

I'm still a critic in terms of actually using it, but what I find amazing about tailwind is how amenable it is to AI-generated workflows. It seriously works _so good_. Anything can be expressed, and systematically. There's something amazingly useful there.

Re: Tailwind CSS v4.0

#87

Post by jitl »

rglullis wrote: post #27
kyleyeats wrote: post #23

Earlier quoted context omitted.

As someone who made a competing product along these lines (that got no attention or traction): Tailwind gives CSS a "place" in the codebase. It benefits orgs, not necessarily apps. I didn't get it at first either. But it's very useful to the people to whom it's useful.

> Tailwind gives CSS a "place" in the codebase. It benefits orgs, not necessarily apps. That is a better argument. But couldn't we be able to achieve that by, e.g: - Create one standard HTML document with a predefined structure and including all the web components needed by your product. - Having all designers and frontend developers developing their CSS (or SCSS) against this single base document This would be basic…

This works for products with a very limited scope that are mostly content focused, with a very small design team so everyone can agree to use the very limited toolkit in standards.html. The approach of saying “All ui shall only use these 29 components, anything else is forbidden” is not going to fly in a company with 10s of designers and 100s of engineers.

We tried this style at Airbnb and it turns out forcing all UI changes - from either designers or engineers - to acquire a single exclusive lock on standards.html leads to a fuckton of contention and frustration, and soon people are just going to yolo their own thing totally ignoring the pristine blessed system because the system doesn’t work.

The art of design systems isn’t a single technical approach - it’s finding an optimal workflow so your design engineers can build a UI toolkit that your product teams will actually adopt and contribute to, within the constraints of your existing tech stack & organization.

Re: Tailwind CSS v4.0

#88

Post by sebmellen »

bern4444 wrote: post #79

My initial reaction to Tailwind was: what a pain. I already know CSS, now I have to learn CSS again... I imagine its how parents might feel when they go to help their children with math homework only to find the math is now totally different from when they were in school and their methods (while still valid) for solving problems are no longer accepted by the school and their child is annoyed by having to reconcile th…

Limitation reduces available complexity and that’s why tailwind wins. It’s a composable, standardized, and modularized wrapper around a very massive and complex system. That’s a big advancement.

Re: Tailwind CSS v4.0

#89

Post by jitl »

bern4444 wrote: post #79

My initial reaction to Tailwind was: what a pain. I already know CSS, now I have to learn CSS again... I imagine its how parents might feel when they go to help their children with math homework only to find the math is now totally different from when they were in school and their methods (while still valid) for solving problems are no longer accepted by the school and their child is annoyed by having to reconcile th…

I agree it’s frustrating initially to re-learn CSS… I used to make the same arguments. But after contributing to an open-source project using Tailwind I got up to speed, and now I feel differently.

Tailwind is essentially just stenography for style={{…}} - a single utility takes 15 characters that would take multiple lines in a .css file or style object. It greatly reduces the amount of time I need to spend googling stuff like “visual text replacement css” or perusing various css cheat sheets or skimming through css-tricks blog posts from 8 years ago. Instead I always go to tailwind docs, and quickly learn the utility class that just does the thing I want. A surprising amount of it fits in my brain cache, much more than trying to cache the css for all the tasks I might need to do in a layout.

Re: Tailwind CSS v4.0

#90

Post by jitl »

rglullis wrote: post #24
crooked-v wrote: post #5

Earlier quoted context omitted.

"Basically just inline CSS, but less fiddly and much more optimizable than the style attribute" was always the selling point of Tailwind in the first place.

Then , yes. But nowadays CSS is a lot more powerful and has caught up. So why bother with Tailwind?

CSS has become more confusing over time, not less confusing, so the upside of a utility class approach like Tailwind is also improving over time rather than decreasing.

Tailwind solves css confusion by presenting a “paved road” for many tasks. Want to do “thing”? Just look up “thing” in the tailwind docs, add “thing-2” to your class, done in 2 minutes. Rather than look up “thing” on google, skim several articles, then write 4-10 lines of CSS, done in 30 minutes.

As CSS has gotten more complexity from new capabilities, solving various tasks with it feels more and more like a research project. Like centering a div vertically and horizontally - there’s now 3-4 generations of solutions for this task:

1. Hacky stuff with position: absolute or floats

2. Flexbox approach. Hope you remember the 6 different attributes you need to set! Oh, there’s a new shorthand for flex now? Cool! More stuff to learn.

3. Grid approach. There are a bunch of different ways to structure a grid centering approach. Hope you remember how grid templates work!

With tailwind, just add 2 classes, done.

Post reply on HN