Tailwind CSS v4.0 Beta 1

Read some of the Getting Started documentation, for fun. First step:

> Installing with Vite

What the hell is Vite? Oh, it seems to be something you need to install via npm.

I cannot help but to ask - why do we require npm, or Vite, for something that looks like it should "help" with CSS?

Why is the webdev such a shitshow, that seems to get ever deeper into its own weird rabbit hole?

Generally use the standalone tailwind CSS CLI tool for keeping things lean. Sadly the download link from the "Getting Started" page https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.... is broken.

Shows that the "bloated" way of doing things is now the norm.

I agree with you in the general case, but many people are going to be using Tailwind as part of a build step, and many of those people will be using Vite to do that build. Two options down is the option to install the CLI, which does not require any other build tools.

As for why it requires npm: I dislike the Node ecosystem as much as the next guy, but it’s a tool used for web development. Where else are you gonna install it from?

Because if you are working with CSS, there’s a decent chance you’ll be using npm and/or Vite, and it’s convenient to integrate your tools to save yourself time. Don’t like it, pick another installation method, like the standalone CLI build option, that needs neither.

Software is required to "help" with CSS. Only seems reasonable that you'd need to install said software. Installing the Tailwind package provides the Tailwind software. So when you build your website that uses the `block` class, that class actually exists somewhere - because you pulled it in with the installation via the package manager.

Surely we can agree that distributing shared libraries via a package manager is a good practice, no?

CSS is text. What's wrong with copying the required CSS stylesheets over and including (importing) them from your own stylesheets?

Surely we don't need a "package manager" and a "build chain" for this?

Then again, I'm a person that writes any web-related code (HTML, JS, CSS, etc.) by hand.

Where did we take the left-turn of not understanding how things work on the actual tech level? These tools hide all of the actually required steps to npm-infested bloat.

x86 ASM is text but we don't build software by copying and pasting it. While the underlying thing we ship is CSS, that doesn't mean we can't add tooling layers to make it easier or more efficient. While it's totally allowed to write by hand, most frontend web developers I know are very comfortable with NPM, and indeed having dependencies consumed from a package manager is often preferred.

The number of tailwind classes is so large now that copy/pasting the whole set into your project would mean a huge bundle size.

Part of that the tailwind package is doing is making sure that only the relevant tailwind classes are included.

Looks like you are not really familiar with how Tailwind works. And if you don't understand it of course Vite or a build step will look weird. But I suggest first getting familiar with the thing you are discussing to avoid adding misguided comments to the discussion that really don't add any value.

Aside from that the website also has a guide to install it with postcss, a tool I've never heard of before (forgive my intentional ignorance).

npm is for designed primarily for js dev. Many (most?) sites aren't written in js -- they're written in Java, C#, Python, PHP, etc.

Thankfully, tailwind is available directly as a downloadable binary. Unfortunately the link in their beta docs is buried, and also broken -- the correct link is here:

https://github.com/tailwindlabs/tailwindcss/releases/

What is the issue? Except you not being up to date with the ecosystem and complaining about it?

Why do I need a car key and worry about gasoline? I can just hop on a horsie and ride away!

So Vite is a security measure against opportunistic theft? Theft of what?

Hey, I yearn for the days of good car analogies too. But the car key is not an essential part of the car experience, rather a necessity borne of the distrust of follow man.

So Vite builds a custom style sheet based upon the Tailwind classes that are actually used in the project?

Though you are of course correct, I see no problem with somebody reading about technologies that they themselves don't use here on HN. I personally read HN to get familiar with new technologies that I may find useful in my work and private life. I first heard of OpenAI and Anthropic here.

yes, exactly

Webdev is a shitshow so investors money could burn quicker. Huge potential for companies that can come in and transform the stack by throwing away the whole "modern" JS stack and use things like Turbo or LiveView

Are you just lazy? Apart from not being up to date with common ecosystems (which I'd expect when doing anything web), look at the Getting Started:

Getting started ->Installing with Vite ->Installing with PostCSS ->Installing the CLI ->Upgrading from v3

At the bottom of the CLI paragraph it says "You can also download standalone builds of the new CLI tool from GitHub for projects that don’t otherwise depend on the Node.js ecosystem."

They just put the most common stuff at the top, because that's what most devs will use.

Agree, and the most maddening thing is that the platform is honestly better than ever. Doing your layout in CSS is so much easier now than it was 10 years ago, thanks to CSS variable, containers queries, and widely supported flexbox & grid.

It's the NPM ecosystem above that's being stupid, and believe that adding more tools and more processing is a good thing.

> Surely we can agree that distributing shared libraries via a package manager is a good practice, no?

At one point, long ago, you could just download a file, reference it in your index.html, and use it without ever having to worry about updating this package. It had its flaws, but it also had many advantages compared to having an external dependency that might conflict with your version of Typescript, or being highjacked by bad actors.

I don't diss the concept of package managers at all, but there are lots of case where vendoring an external package is preferable than adding it as a dependency.

> What the hell is Vite?

That’s on you. Vite is the de facto standard bundler today and one of the best things to happen to the frontend ecosystem in the last few years. Without even using it, do yourself a favor and check it out.

This is such a biased take. There's many ways to build a website, you just don't like the most popular way because you're not comfortable with the technology and ethos.

That's ok, but don't go around spouting nonsense about about investors throwing their money away on js projects.

This is a feature for projects already using Node and Vite (which is quite popular these days).

It's also not a requirement. The binary still exists, you can run it standalone.

While I don't disagree (broadly speaking) with you about the complexity of webdev, it looks like you don't have a full understanding of what Tailwind is:

a (CSS) code generator.

It happens to be written in JS so it can be integrated as part of existing build steps or bundling. That's the rationale behind it. :) It's build-time, not something client-side.

To answer your question sincerely, Tailwind is a series of utility classes that make it easy to author CSS within HTML (pages or components). Back in the day we had many libraries to do this, the most popular was called Bootstrap. It looks like this: https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootst...

You'll notice that Bootstrap CSS includes every single utility class within Bootstrap. This is fine, but it could be a lot smaller - reducing page load times for clients and data transfer for servers - if the CSS included by a library was solely the CSS used by one's site, and no more. This is why we web developers use an npm/vite build step generally, even if our out is very plain static HTML/CSS.

"Well why can't I just use Tailwind like I do with bootstrap? I just want to play around with it and not have to learn all that build stuff."

You can: https://tailwindcss.com/docs/installation/play-cdn

You'll also notice, if you search for Bootstrap today, that it expects one is using npm and webpack, parcel, or vite.

> You'll also notice, if you search for Bootstrap today, that it expects one is using npm and webpack, parcel, or vite.

It doesn't? Most of my clients and websites I saw just use the bundle.

https://getbootstrap.com/docs/5.0/getting-started/introducti...

The docs don't expect any complicated tooling.

Also: When served from a CDN like your link above, popular CSS like Bootstrap had a decent chance of _already_ being in your browser's cache, so despite downloading more initially you'd come across sites using the same version that meant _no_ delay downloading CSS for it.

Isn't this outdated information? https://httptoolkit.com/blog/public-cdn-risks/

> Most importantly: cached content is no longer shared between domains. This is known as cache partitioning and has been the default in Chrome since October 2020 (v86), Firefox since January 2021 (v85), and Safari since 2013 (v6.1). That means if a visitor visits site A and site B, and both of them load https://public-cdn.example/my-script.js, the script will be loaded from scratch both times.

Only parts of modern web dev are unnecessarily complex. What you can do with frameworks like SvelteKit or Nuxt, SolidStart, Remix, Next, ... is amazing. For simpler use-cases you sure can and should use vanilla HTML, CSS and some JS maybe some HTMX to level the interactivity ceiling, but for highly interactive apps with flexible rendering you need one of the modern frameworks. I assume you lack experience in front end, so believe me, getting started with a simple React SPA pre CreateReactApp (6-8 years ago?) was a horror trip. Now, starting, working on and deploying an app with the modern frameworks, e.g. SvelteKit doesn't get any easier in any tech. As a long term full stack dev my assessment is that web dev is in an exciting phase. A lot of innovation (and improvements) has been made in the recent years. Tooling has greatly improved mainly thanks to Vite, reactivity has become simpler, DX is a prio 1 concern thanks to Svelte. While not being fully convinced of general usefulness of universal rendering, I admire the innovation there.