v4-compatible standalone blog post following the old v3 one

src/app/(docs)/docs/installation/(tabs)/tailwind-cli/page.tsx

@@ -93,7 +93,7 @@ export default function Page() {
         </h3>
         <p>
           The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI
-          tool. The CLI is also available as a <Link href="/blog/standalone-cli">standalone executable</Link> if you
+          tool. The CLI is also available as a <Link href="/blog/2025-04-18-standalone-cli-for-v4">standalone executable</Link> if you
           want to use it without installing Node.js.
         </p>
       </div>

src/app/blog/authors.ts

@@ -5,6 +5,7 @@ import reininkAvatar from "./img/reinink.jpg";
 import robinmalfaitAvatar from "./img/robinmalfait.jpg";
 import simonswissAvatar from "./img/simonswiss.jpg";
 import danhollickAvatar from "./img/danhollick.jpg";
+import rozsazoltanAvatar from "./img/rozsazoltan.jpg";
 
 export interface Author {
   name: string;
@@ -53,3 +54,9 @@ export const danhollick = {
   twitter: "DanHollick",
   avatar: danhollickAvatar.src,
 } satisfies Author;
+
+export const rozsazoltan = {
+  name: "Zoltán Rózsa",
+  twitter: "rozsazoltan_dev",
+  avatar: rozsazoltanAvatar.src,
+} satisfies Author;

src/blog/2025-04-18-standalone-cli-for-v4/index.mdx

@@ -0,0 +1,84 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+import { UsingACustomValue } from "@/components/content.tsx";
+import { Image } from "@/components/media";
+import Link from "next/link";
+import { CodeExample, js, ts, CodeExampleGroup, CodeBlock } from "@/components/code-example";
+
+import { rozsazoltan } from "@/app/blog/authors";
+import image from "./card.jpg";
+
+export const meta = {
+  title: "Standalone CLI: Use Tailwind CSS v4 without Node.js",
+  description: `Updated v4-compatible post for the Standalone CLI introduced in v3. Build applications with Tailwind CLI without requiring Node.js or npm.`,
+  date: "2025-04-18T13:00:00.000Z",
+  authors: [rozsazoltan],
+  image,
+  excerpt: (
+    <>
+      Tailwind CSS is written in JavaScript and distributed as an npm package, which means you've always had to have Node.js and npm installed to use it.
+
+      Updated v4-compatible documentation for the Standalone CLI introduced in v3. Build applications with Tailwind CLI without requiring Node.js or npm.
+    </>
+  ),
+};
+
+Tailwind CSS is written in JavaScript and distributed as an npm package, which means you've always had to have Node.js and npm installed to use it.
+
+This has made it harder to integrate into projects where using npm isn't always common, and with tools like <Link href="https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b">Rails</Link> and <Link href="https://github.com/phoenixframework/phoenix/pull/4377">Phoenix</Link> both moving away from npm by default, we needed to find a way for people to use Tailwind in these projects without forcing them to adopt an entirely separate ecosystem of tooling.
+
+Since 2021, you can use Tailwind CSS without requiring Node.js or npm via the <Link href="https://github.com/tailwindlabs/tailwindcss/releases/latest">standalone CLI build</Link>. We're now updating the documentation related to that announcement for v4.
+
+---
+
+## Get started
+
+To install it, grab the executable for your platform from the <Link href="https://github.com/tailwindlabs/tailwindcss/releases/latest">latest release</Link> on GitHub, making sure to give it executable permissions:
+
+```sh
+# Example for macOS arm64
+curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
+chmod +x tailwindcss-macos-arm64
+mv tailwindcss-macos-arm64 tailwindcss
+```
+
+At the top of your main CSS file (e.g., `input.css`), add the Tailwind CSS imports as you can see in <Link href="/docs/installation/tailwind-cli">the Tailwind CLI installation</Link> steps:
+
+```css
+@import "tailwindcss";
+```
+
+Now you can use it just like our npm-distributed CLI tool:
+
+```sh
+# Start a watcher
+./tailwindcss -i input.css -o output.css --watch
+
+# Compile and minify your CSS for production
+./tailwindcss -i input.css -o output.css --minify
+```
+
+We've even bundled the latest versions of all of our first-party plugins, so if you want to use them in your project, just `@plugin` them in your `input.css` file like you would in a Node-based project:
+
+```css
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+```
+
+<div className="bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 p-4">
+  <strong>Note:</strong> Starting from Tailwind CSS v4, the init process has been removed, and there is no need for a `tailwind.config.js` file. For configuration, <Link href="/blog/tailwindcss-v4#css-first-configuration">follow our CSS-first configuration guide</Link>.
+</div>
+
+You get all the power of our standard npm-distributed CLI in a convenient, portable package — no dependencies required.
+
+---
+
+## Which CLI should I use?
+
+If you are already using npm in your project, use the npm-distributed version of our CLI that we've always provided. It's simpler to update, the file size is smaller, and you're already in the ecosystem anyways — there's no benefit at all to using the standalone build.
+
+If on the other hand you're working on a project where you don't otherwise need Node.js or npm, the standalone build can be a great choice. If Tailwind was the only reason you had a `package.json` file, this is probably going to feel like a nicer solution.

src/blog/standalone-cli/index.mdx

@@ -24,10 +24,15 @@ export const meta = {
 
       Today we're announcing a new <Link href="https://github.com/tailwindlabs/tailwindcss/releases/latest">standalone CLI build</Link> that gives you the full power of Tailwind CLI in a self-contained executable — no Node.js or npm required.
     </>
-
-),
+  ),
 };
 
+<div className="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 p-4">
+  <strong>Warning:</strong> This blog post was created for Tailwind CSS v3.
+
+  Therefore, the installation steps included may differ starting from v4. To clearly distinguish between the two posts, we <Link href="/blog/2025-04-18-standalone-cli-for-v4">mentioned the current steps related to Tailwind CLI</Link> in a new blog post.
+</div>
+
 Tailwind CSS is written in JavaScript and distributed as an npm package, which means you've always had to have Node.js and npm installed to use it.
 
 This has made it harder to integrate into projects where using npm isn't always common, and with tools like <Link href="https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b">Rails</Link> and <Link href="https://github.com/phoenixframework/phoenix/pull/4377">Phoenix</Link> both moving away from npm by default, we needed to find a way for people to use Tailwind in these projects without forcing them to adopt an entirely separate ecosystem of tooling.