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`.

packages/@tailwindcss-upgrade/src/codemods/config/migrate-prettier.ts

@@ -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 {}
-}

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()))
 

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(' ')}`