From 46758f7c299411388571b09e7a8dfeeaf8f90c6f Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 24 Apr 2025 11:13:21 +0200
Subject: [PATCH] Bump all Tailwind CSS related dependencies during upgrade
 (#17763)

This PR bumps all Tailwind CSS related dependencies when running the
upgrade tool _if_ the dependency exists in your package.json file.

E.g.: if you have `tailwindcss` and `@tailwindcss/vite` in your
package.json, then both will be updated to the latest version.

This PR is not trying to be smart and skip updating if you are already
on the latest version. It will just try and update the dependencies and
your package manager will do nothing in case it was already the latest
version.

## Test plan

Ran this on one of my personal projects and this was the output:
<img width="1023" alt="image"
src="https://github.com/user-attachments/assets/a189fe7a-a58a-44aa-9246-b720e7a2a892"
/>


Notice that I don't have `@tailwindcss/vite` logs because I am using
`@tailwindcss/postcss`.
---
 .../src/codemods/config/migrate-prettier.ts   | 15 ----------
 packages/@tailwindcss-upgrade/src/index.ts    | 28 +++++++++++--------
 .../src/utils/packages.ts                     |  8 ++++++
 3 files changed, 24 insertions(+), 27 deletions(-)
 delete mode 100644 packages/@tailwindcss-upgrade/src/codemods/config/migrate-prettier.ts

diff --git a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-prettier.ts b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-prettier.ts
deleted file mode 100644
index 980f35617..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-prettier.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { pkg } from '../../utils/packages'
-import { highlight, success } from '../../utils/renderer'
-
-export async function migratePrettierPlugin(base: string) {
-  let packageJsonPath = path.resolve(base, 'package.json')
-  try {
-    let packageJson = await fs.readFile(packageJsonPath, 'utf-8')
-    if (packageJson.includes('prettier-plugin-tailwindcss')) {
-      await pkg(base).add(['prettier-plugin-tailwindcss@latest'])
-      success(`Updated package: ${highlight('prettier-plugin-tailwindcss')}`, { prefix: '↳ ' })
-    }
-  } catch {}
-}
diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
index 1c679518f..85b5520a0 100644
--- a/packages/@tailwindcss-upgrade/src/index.ts
+++ b/packages/@tailwindcss-upgrade/src/index.ts
@@ -7,7 +7,6 @@ import path from 'node:path'
 import postcss from 'postcss'
 import { migrateJsConfig } from './codemods/config/migrate-js-config'
 import { migratePostCSSConfig } from './codemods/config/migrate-postcss'
-import { migratePrettierPlugin } from './codemods/config/migrate-prettier'
 import { analyze as analyzeStylesheets } from './codemods/css/analyze'
 import { formatNodes } from './codemods/css/format-nodes'
 import { linkConfigs as linkConfigsToStylesheets } from './codemods/css/link'
@@ -229,11 +228,22 @@ async function run() {
     }
 
     info('Updating dependencies…')
-    try {
-      // Upgrade Tailwind CSS
-      await pkg(base).add(['tailwindcss@latest'])
-      success(`Updated package: ${highlight('tailwindcss')}`, { prefix: '↳ ' })
-    } catch {}
+    for (let dependency of [
+      'tailwindcss',
+      '@tailwindcss/cli',
+      '@tailwindcss/postcss',
+      '@tailwindcss/vite',
+      '@tailwindcss/node',
+      '@tailwindcss/oxide',
+      'prettier-plugin-tailwindcss',
+    ]) {
+      try {
+        if (dependency === 'tailwindcss' || (await pkg(base).has(dependency))) {
+          await pkg(base).add([`${dependency}@latest`])
+          success(`Updated package: ${highlight(dependency)}`, { prefix: '↳ ' })
+        }
+      } catch {}
+    }
 
     let tailwindRootStylesheets = stylesheets.filter((sheet) => sheet.isTailwindRoot && sheet.file)
 
@@ -305,12 +315,6 @@ async function run() {
     await migratePostCSSConfig(base)
   }
 
-  info('Updating dependencies…')
-  {
-    // Migrate the prettier plugin to the latest version
-    await migratePrettierPlugin(base)
-  }
-
   // Run all cleanup functions because we completed the migration
   await Promise.allSettled(cleanup.map((fn) => fn()))
 
diff --git a/packages/@tailwindcss-upgrade/src/utils/packages.ts b/packages/@tailwindcss-upgrade/src/utils/packages.ts
index 863451a29..f87b71d1b 100644
--- a/packages/@tailwindcss-upgrade/src/utils/packages.ts
+++ b/packages/@tailwindcss-upgrade/src/utils/packages.ts
@@ -31,6 +31,14 @@ export function pkg(base: string) {
         throw e
       }
     },
+    async has(name: string) {
+      try {
+        let packageJsonPath = resolve(base, 'package.json')
+        let packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8')
+        return packageJsonContent.includes(`"${name}":`)
+      } catch {}
+      return false
+    },
     async remove(packages: string[]) {
       let packageManager = await packageManagerForBase.get(base)
       let command = `${packageManager} remove ${packages.join(' ')}`