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

Tailwind CSS v4.0 Beta 1

tailwindcss.com

Post reply on HN
Print view View original

21–30 of 135 posts

Re: Tailwind CSS v4.0 Beta 1

#21

Post by emmanueloga_ »

that_guy_iain wrote: post #4

I'm really curious as to why they felt the need to work on improving performance.[1] Were people complaining it was too slow? Were the performance improvements just the benefit of refactoring they did for other reasons? Considering the build happens once during your build phase, taking under half a second doesn't seem like something I would even bother looking at. So it just jumps out to me, so I'm just curious. [1]…

I think the rewrite aimed to simplify installation and configuration. TW 4.0 switched from PostCSS to LightningCSS [1], and Rust-based tools tend to offer a simpler setup via single binaries (in contrast to the complexity of typical JS-based tools).

Moving from pure JS to Rust also brings performance gains. Even if the main goal wasn't "performance," it's a nice side effect worth highlighting.

--

1: https://lightningcss.dev/

Re: Tailwind CSS v4.0 Beta 1

#22

Post by bryanrasmussen »

seanwilson wrote: post #2

Tailwind threads usually include comments and questions that are answered in the documentation, so here's some useful links for people that haven't used Tailwind before. A core part of Tailwind is that you reuse styles by using a templating system vs using custom CSS classes e.g. you have a button.html file that contains the styling for your buttons for reuse, so you don't have to keep repeating the same utility clas…

How does Tailwind handle responsive design issues better than CSS? Assuming of course CSS where the devs know how to use clamp.

Re: Tailwind CSS v4.0 Beta 1

#23

Post by that_guy_iain »

ripley12 wrote: post #15
that_guy_iain wrote: post #11

Earlier quoted context omitted.

> I absolutely care about things that take hundreds of milliseconds for my builds. The faster I can build, the faster I can iteratively try new things things out. The goal should be to be able to see changes instantly after you make them, and Tailwind is usually just 1 part of a build pipeline. When we're talking about ms the build is not the thing that is affecting your ability to try new things out. It was already…

1. Tailwind is just 1 part of a build system, and it all adds up 2. Watch Inventing on Principle if you haven't already. Pushing build times into milliseconds or sub-milliseconds enables new capabilities

If you want to try new things out and move fast with your CSS, you're not building the entire system. It's a partial build and that was already faster than you would even be able to react. Your browser refreshing would take longer.

Re: Tailwind CSS v4.0 Beta 1

#24

Post by throwup238 »

bryanrasmussen wrote: post #22
seanwilson wrote: post #2

Tailwind threads usually include comments and questions that are answered in the documentation, so here's some useful links for people that haven't used Tailwind before. A core part of Tailwind is that you reuse styles by using a templating system vs using custom CSS classes e.g. you have a button.html file that contains the styling for your buttons for reuse, so you don't have to keep repeating the same utility clas…

How does Tailwind handle responsive design issues better than CSS? Assuming of course CSS where the devs know how to use clamp.

YMMV but I find ‘lg:…’ to be much better than ‘@media (min-width: 992px) { … }’ at the expense of repeating ‘lg:’ every class. Since most components don’t need too many responsive classes per breakpoint, this is a net benefit most of the time (and nothing is stopping devs from combining utility classes and custom css with media queries).

Like GP said, this kind of specificity is impossible in inline styles altogether which is relevant when not using CSS-in-JS in React et al.

Re: Tailwind CSS v4.0 Beta 1

#25

Post by Brajeshwar »

atsjie wrote: post #6

They are switching from sRGB to OKLCH. First time I heard of OKLCH tbh. Anyone know if that is part of a wider adoption trend or is Tailwind pioneering here? Looking at the examples it does seem to offer some advantages; but was primarily surprised that they now use it as a default.

OKLCH is widely supported in all modern browsers.[1] My easiest winning point with getting teams to start with OKLCH is that we can 'programmatically' control the color shades and tints by tinkering with numbers/values. To the designers (who don't write codes), I tell them that they can now focus on choosing the key colors (primary, accent, etc.) and then let CSS do the magic.

A good friend maintains a tool to tinker with various shades/tint of colors with OKLCH https://colorcolor.in

1. https://caniuse.com/?search=oklch

Re: Tailwind CSS v4.0 Beta 1

#27

Post by mattigames »

joshdavham wrote: post #17
dcre wrote: post #10

Earlier quoted context omitted.

I think a lot of the optimization work was for dev time and it carried over to build time. I listened to a podcast interview with Adam Wathan where I think he said they just got really into shaving nanoseconds. They have a very successful business and I think they just enjoyed doing this work. On the other hand I do think even if you’re cutting from 50ms to 5ms (both low numbers in absolute terms) there are often new…

> there are often new unforeseen workflows that become possible once you can do that operation so frequently that it’s free. You could do it on every keystroke. That’s really interesting to think about actually! What kinds of practical things do you think could be enabled by an extremely fast tailwindcss?

LLM trying design using tailwind, stuff like: try to recreate this bitmap image using tailwind utility classes; the iteration speed for that kind of tasks depend on such speed.

Re: Tailwind CSS v4.0 Beta 1

#28

Post by yieldcrv »

notRobot wrote: post #26

I've never had as much fun doing front-end web stuff as I've had since I've picked up tailwind.

this is the honeymoon phase, wait until your package manager and transpiler is out of date, and your progressive web app framework is out of date, and your typescript version isnt compatible with the upgrade yet, and tailwinds isnt either or it is but none of the documentation is yet, but you have to upgrade because your CI/CD cant run your version of node anymore

and now you have 100 flags across 5 configuration files and dont know which one to change to make everything work, but changing it might break the ability for a random dependency to compile, and even if you get that to work it turns out your project doesnt render anymore

Re: Tailwind CSS v4.0 Beta 1

#29

Post by LaundroMat »

joshdavham wrote: post #17
dcre wrote: post #10

Earlier quoted context omitted.

I think a lot of the optimization work was for dev time and it carried over to build time. I listened to a podcast interview with Adam Wathan where I think he said they just got really into shaving nanoseconds. They have a very successful business and I think they just enjoyed doing this work. On the other hand I do think even if you’re cutting from 50ms to 5ms (both low numbers in absolute terms) there are often new…

> there are often new unforeseen workflows that become possible once you can do that operation so frequently that it’s free. You could do it on every keystroke. That’s really interesting to think about actually! What kinds of practical things do you think could be enabled by an extremely fast tailwindcss?

Live reloading
Post reply on HN