Ensure clients pin the tailwindcss version (#15011)

We noticed that in the current alpha 34 release, the `package.json` file
of the `@tailwindcss/node` package only defines `tailwindcss` as a dev
dependency. This makes it very easy for version mismatches to happen
when a v3 version (or an earlier v4 alpha for that matter) was installed
in the same project:

```json
{
  "name": "@tailwindcss/node",
  "version": "4.0.0-alpha.34",
  "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/tailwindlabs/tailwindcss.git",
    "directory": "packages/@tailwindcss-node"
  },
  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
  "homepage": "https://tailwindcss.com",
  "files": [
    "dist/"
  ],
  "publishConfig": {
    "provenance": true,
    "access": "public"
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./require-cache": {
      "types": "./dist/require-cache.d.ts",
      "default": "./dist/require-cache.js"
    },
    "./esm-cache-loader": {
      "types": "./dist/esm-cache.loader.d.mts",
      "default": "./dist/esm-cache.loader.mjs"
    }
  },
  "devDependencies": {
    "tailwindcss": "4.0.0-alpha.34"
  },
  "dependencies": {
    "enhanced-resolve": "^5.17.1",
    "jiti": "^2.0.0-beta.3"
  },
  "scripts": {
    "build": "tsup-node",
    "dev": "pnpm run build -- --watch"
  }
}
```

Furthermore, we were trying to fix issues where our integration test
setup could not install `tailwindcss@3` because of how we did pnpm
overrides.

This PR fixes this by:

- Ensuring every client that calls into `tailwindcss` core marks it as a
version-pinned dependency. You are still required to install
`tailwindcss` in your project along side a client (e.g.
`@tailwindcss/vite`) but we now only use your installed version for
importing the respective `.css` files. For the core logic, we are now
requiring each package to use `tailwindcss` at the same version. This
should help resolve issues like
#14652
- We tried to eliminate the dependency on `tailwindcss` from the
`@tailwindcss/upgrade` package. Unfortunately this is not possible to do
right now because we need to load the CSS files from v4 to create the
right environment. In a future version we could bundle the required CSS
files with `@tailwidncss/upgrade` but it doesn't seem necessary for now.
- We then changed our integration test overrides to only override the
`tailwindcss` package that are dependencies of the known list of
packages that we have `tailwindcss` dependencies on: `@tailwindcss/node`
and `@tailwindcss/upgrade`. This ensures that we can install v3 of
`tailwindcss` in the integration tests and it will work. Something we
want to do for some upgrade tests.

# Test plan

Integration work again. Furthermore we added a quick setup with the CLI
using the local tarballs and ensured it works:

```bash
pnpm init
pnpm install ../../tailwindcss/dist/tailwindcss-cli.tgz 
pnpm install ../../tailwindcss/dist/tailwindcss.tgz 
echo '@import "tailwindcss";' > index.css
echo '<div class="underline"></div>' > index.html
pnpm tailwindcss -i index.css -o out.css
cat out.css
```

Author: philipp-spiess

integrations/upgrade/index.test.ts

@@ -8,10 +8,8 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
           }
         }
       `,
@@ -53,6 +51,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           },
           "devDependencies": {
@@ -166,6 +165,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -246,7 +246,7 @@ test(
       `,
       'tailwind.config.js': js`module.exports = {}`,
       'src/index.css': css`
-        @import 'tailwindcss';
+        @import 'tailwindcss/tailwind.css';
 
         .a {
           @apply flex;
@@ -311,7 +311,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -383,14 +383,14 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
       `,
       'tailwind.config.js': js`module.exports = {}`,
       'src/index.css': css`
-        @import 'tailwindcss';
+        @import 'tailwindcss/tailwind.css';
 
         @layer components {
           .btn {
@@ -460,7 +460,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -907,6 +907,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }

integrations/utils.ts

@@ -474,7 +474,14 @@ async function overwriteVersionsInPackageJson(content: string): Promise<string>
   json.pnpm ||= {}
   json.pnpm.overrides ||= {}
   for (let pkg of PUBLIC_PACKAGES) {
-    json.pnpm.overrides[pkg] = resolveVersion(pkg)
+    if (pkg === 'tailwindcss') {
+      // We want to be explicit about the `tailwindcss` package so our tests can
+      // also import v3 without conflicting v4 tarballs.
+      json.pnpm.overrides['@tailwindcss/node>tailwindcss'] = resolveVersion(pkg)
+      json.pnpm.overrides['@tailwindcss/upgrade>tailwindcss'] = resolveVersion(pkg)
+    } else {
+      json.pnpm.overrides[pkg] = resolveVersion(pkg)
+    }
   }
 
   return JSON.stringify(json, null, 2)

packages/@tailwindcss-cli/package.json

@@ -36,6 +36,6 @@
     "lightningcss": "catalog:",
     "mri": "^1.2.0",
     "picocolors": "^1.1.1",
-    "tailwindcss": "workspace:^"
+    "tailwindcss": "workspace:*"
   }
 }

packages/@tailwindcss-node/package.json

@@ -36,11 +36,9 @@
       "default": "./dist/esm-cache.loader.mjs"
     }
   },
-  "devDependencies": {
-    "tailwindcss": "workspace:^"
-  },
   "dependencies": {
     "enhanced-resolve": "^5.17.1",
-    "jiti": "^2.0.0-beta.3"
+    "jiti": "^2.0.0-beta.3",
+    "tailwindcss": "workspace:*"
   }
 }

packages/@tailwindcss-postcss/package.json

@@ -35,7 +35,7 @@
     "@tailwindcss/oxide": "workspace:^",
     "lightningcss": "catalog:",
     "postcss": "^8.4.41",
-    "tailwindcss": "workspace:^"
+    "tailwindcss": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "catalog:",

packages/@tailwindcss-upgrade/package.json

@@ -40,9 +40,9 @@
     "postcss-import": "^16.1.0",
     "postcss-selector-parser": "^7.0.0",
     "prettier": "^3.3.3",
-    "tailwindcss": "workspace:^",
     "tree-sitter": "^0.22.0",
-    "tree-sitter-typescript": "^0.23.0"
+    "tree-sitter-typescript": "^0.23.0",
+    "tailwindcss": "workspace:*"
   },
   "devDependencies": {
     "@types/braces": "^3.0.4",

packages/@tailwindcss-upgrade/src/codemods/migrate-at-apply.test.ts

@@ -1,8 +1,8 @@
 import { __unstable__loadDesignSystem } from '@tailwindcss/node'
 import dedent from 'dedent'
 import postcss from 'postcss'
-import type { Config } from 'tailwindcss'
 import { expect, it } from 'vitest'
+import type { Config } from '../../../tailwindcss/src/compat/plugin-api'
 import { migrateAtApply } from './migrate-at-apply'
 
 const css = dedent

packages/@tailwindcss-upgrade/src/codemods/migrate-at-apply.ts

@@ -1,5 +1,5 @@
 import type { AtRule, Plugin } from 'postcss'
-import type { Config } from 'tailwindcss'
+import type { Config } from '../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../tailwindcss/src/design-system'
 import { segment } from '../../../tailwindcss/src/utils/segment'
 import { migrateCandidate } from '../template/migrate'

packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts

@@ -1,7 +1,7 @@
 import dedent from 'dedent'
 import postcss, { type Plugin, type Root } from 'postcss'
-import type { Config } from 'tailwindcss'
 import { keyPathToCssProperty } from '../../../tailwindcss/src/compat/apply-config-to-theme'
+import type { Config } from '../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../tailwindcss/src/design-system'
 import { toKeyPath } from '../../../tailwindcss/src/utils/to-key-path'
 import * as ValueParser from '../../../tailwindcss/src/value-parser'

packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts

@@ -1,6 +1,6 @@
 import { type Plugin, type Root } from 'postcss'
-import type { Config } from 'tailwindcss'
 import { resolveConfig } from '../../../tailwindcss/src/compat/config/resolve-config'
+import type { Config } from '../../../tailwindcss/src/compat/plugin-api'
 import { buildMediaQuery } from '../../../tailwindcss/src/compat/screens-config'
 import type { DesignSystem } from '../../../tailwindcss/src/design-system'
 import { DefaultMap } from '../../../tailwindcss/src/utils/default-map'