From b497e1eaf36437b60dc8b3523a3ea03d437cf4c1 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 29 Sep 2025 15:59:54 +0200
Subject: [PATCH] =?UTF-8?q?Add=20`Upgrading=20from=20Tailwind=20CSS=20v?=
 =?UTF-8?q?=E2=80=A6`=20when=20running=20upgrade=20tool=20(#19026)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds a bit more information when running the upgrade tool to
know what version of Tailwind CSS you're upgrading from. This will help
users and maintainers when things go wrong.

Will have another PR up soon that errors when the Tailwind CSS version
in package.json and node_modules don't match.

### Test plan

Ran this one one of our older projects and saw the version logged
correctly.

<img width="1055" height="363" alt="image"
src="https://github.com/user-attachments/assets/5cbf4c52-ea0f-42c8-bd55-5bae2ed511de"
/>
---
 crates/node/scripts/move-artifacts.mjs        |  1 -
 packages/@tailwindcss-postcss/README.md       | 58 +++++++++----------
 packages/@tailwindcss-upgrade/src/index.ts    |  4 ++
 .../@tailwindcss-upgrade/src/utils/version.ts |  2 +-
 4 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/crates/node/scripts/move-artifacts.mjs b/crates/node/scripts/move-artifacts.mjs
index 10a87cc15..faf4728ef 100644
--- a/crates/node/scripts/move-artifacts.mjs
+++ b/crates/node/scripts/move-artifacts.mjs
@@ -35,4 +35,3 @@ for (let file of await fs.readdir(tailwindcssOxideRoot)) {
   )
   console.log(`Moved ${file} to npm/wasm32-wasi`)
 }
-
diff --git a/packages/@tailwindcss-postcss/README.md b/packages/@tailwindcss-postcss/README.md
index 1d0900f4a..f824c2a06 100644
--- a/packages/@tailwindcss-postcss/README.md
+++ b/packages/@tailwindcss-postcss/README.md
@@ -62,29 +62,29 @@ By default, this plugin detects whether or not the CSS is being built for produc
 If you want to always enable or disable Lightning CSS the `optimize` option may be used:
 
 ```js
-import tailwindcss from "@tailwindcss/postcss"
+import tailwindcss from '@tailwindcss/postcss'
 
 export default {
- plugins: [
-  tailwindcss({
-    // Enable or disable Lightning CSS
-    optimize: false,
-  })
- ]
+  plugins: [
+    tailwindcss({
+      // Enable or disable Lightning CSS
+      optimize: false,
+    }),
+  ],
 }
 ```
 
 It's also possible to keep Lightning CSS enabled but disable minification:
 
 ```js
-import tailwindcss from "@tailwindcss/postcss"
+import tailwindcss from '@tailwindcss/postcss'
 
 export default {
- plugins: [
-  tailwindcss({
-    optimize: { minify: false },
-  })
- ]
+  plugins: [
+    tailwindcss({
+      optimize: { minify: false },
+    }),
+  ],
 }
 ```
 
@@ -95,32 +95,32 @@ Our PostCSS plugin can rewrite `url(…)`s for you since it also handles `@impor
 In some situations the bundler or framework you're using may provide this feature itself. In this case you can set `transformAssetUrls` to `false` to disable this feature:
 
 ```js
-import tailwindcss from "@tailwindcss/postcss"
+import tailwindcss from '@tailwindcss/postcss'
 
 export default {
- plugins: [
-  tailwindcss({
-    // Disable `url(…)` rewriting
-    transformAssetUrls: false,
+  plugins: [
+    tailwindcss({
+      // Disable `url(…)` rewriting
+      transformAssetUrls: false,
 
-    // Enable `url(…)` rewriting (the default)
-    transformAssetUrls: true,
-  })
- ]
+      // Enable `url(…)` rewriting (the default)
+      transformAssetUrls: true,
+    }),
+  ],
 }
 ```
 
 You may also pass options to `optimize` to enable Lighting CSS but prevent minification:
 
 ```js
-import tailwindcss from "@tailwindcss/postcss"
+import tailwindcss from '@tailwindcss/postcss'
 
 export default {
- plugins: [
-  tailwindcss({
-    // Enables Lightning CSS but disables minification
-    optimize: { minify: false },
-  })
- ]
+  plugins: [
+    tailwindcss({
+      // Enables Lightning CSS but disables minification
+      optimize: { minify: false },
+    }),
+  ],
 }
 ```
diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
index bab07bf16..4c5033084 100644
--- a/packages/@tailwindcss-upgrade/src/index.ts
+++ b/packages/@tailwindcss-upgrade/src/index.ts
@@ -58,6 +58,10 @@ async function run() {
     }
   }
 
+  info(`Upgrading from Tailwind CSS ${highlight(`v${version.installedTailwindVersion(base)}`)}`, {
+    prefix: '↳ ',
+  })
+
   {
     // Stylesheet migrations
 
diff --git a/packages/@tailwindcss-upgrade/src/utils/version.ts b/packages/@tailwindcss-upgrade/src/utils/version.ts
index 6794b1a81..6dab20a35 100644
--- a/packages/@tailwindcss-upgrade/src/utils/version.ts
+++ b/packages/@tailwindcss-upgrade/src/utils/version.ts
@@ -26,6 +26,6 @@ let cache = new DefaultMap((base) => {
   return tailwindVersion
 })
 
-function installedTailwindVersion(base = process.cwd()): string {
+export function installedTailwindVersion(base = process.cwd()): string {
   return cache.get(base)
 }