[v4] Possibility to run v3 and v4 in parallel

[ritingliudd01]

We have two dependencies written in v3 and want to try v4 in main repo.
Is it possible to to run v3 and v4 in parallel? Thanks 🙏

[philipp-spiess]

@ritingliudd01 Hey! Do you mind sharing a bit more about your project setup? In general I don't think there should be interference if you run v3 and v4 on different inputs but a problem might come if you use one package manager to install both dependencies.

If you're on an npm project, you might want to check out package aliases to install the same package in multiple versions. If you need access to the tailwindcss binary, it might make it more complex. If you can share your rough project setup, I can try to take a look. 🙂

[ritingliudd01]

@philipp-spiess Many thanks for your reply. Using package aliases is a very good idea. Let me try this first 🙏

[philipp-spiess]

@ritingliudd01 Awesome! I looked into it too now out of curiosity and I think it depends a lot on how you want to use it. In v4, you can use any of the clients directly (e.g. @tailwindcss/vite or @tailwindcss/cli). These, you can just add to your existing setup and it will resolve the dependencies to include tailwind 4 for these.

The most complex case is if you rely on the CLI for V3 and V4 since they both export similarely named bins. However, if you set up your package.json like this, you'll be able to run both versions of the CLI in parallel:

{
  "name": "v3-and-v4",
  "devDependencies": {
    "tailwindcss": "^3.4.7",
    "@tailwindcss/cli": "4.0.0-alpha.18"
  }
}

γ playground/v3-and-v4 npm exec tailwindcss
≈ tailwindcss v4.0.0-alpha.18

Usage:
  tailwindcss [--input input.css] [--output output.css] [--watch] [options…]

Options:
  -i, --input ··········· Input file
  -o, --output ·········· Output file
  -w, --watch ··········· Watch for changes and rebuild as needed
  -m, --minify ·········· Optimize and minify the output
      --optimize ········ Optimize the output without minifying
      --cwd ············· The current working directory [default: `.`]
  -h, --help ············ Display usage information

γ playground/v3-and-v4 npm exec tailwind


tailwindcss v3.4.7

Usage:
   tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
   tailwindcss init [--full] [--postcss] [options...]

Commands:
   init [options]

Options:
   -i, --input              Input file
   -o, --output             Output file
   -w, --watch              Watch for changes and rebuild as needed
   -p, --poll               Use polling instead of filesystem events when watching
       --content            Content paths to use for removing unused classes
       --postcss            Load custom PostCSS configuration
   -m, --minify             Minify the output
   -c, --config             Path to a custom config file
       --no-autoprefixer    Disable autoprefixer
   -h, --help               Display usage information

[ritingliudd01]

@philipp-spiess Cool! Thanks. I never thought this way. Presumably they might have conflicts with different version numbers.

"tailwindcss": "^3.4.7",
"@tailwindcss/cli": "4.0.0-alpha.18"