Installing the TailwindCSS Vite plugin with Vite 7 - peer vite@"^5.2.0 || ^6" from @tailwindcss/vite@4.1

I'm following the Vite plugin documentation, but I'm running into an error because of the new Vite 7.

I'm creating a new project generated with the new 7.x latest version, then running it:

npm install tailwindcss @tailwindcss/vite

Found: vite@7.0.0
node_modules/vite
  dev vite@"^7.0.0" from the root project

Could not resolve dependency:
peer vite@"^5.2.0 || ^6" from @tailwindcss/vite@4.1.10
node_modules/@tailwindcss/vite
  @tailwindcss/vite@"*" from the root project

How can I still use it with Vite 7 and the @tailwindcss/vite plugin?

Vite 6

Basically, I recommend waiting for official support, and in the meantime, create your project with Vite 6. Vite 7 has only been out for a day.

• Scaffolding your first Vite project - Vite Docs

npm create vite@6

Vite Latest

But even with npm create vite@latest, it's possible to override the TailwindCSS Vite plugin's requirements. Add this to the end of your package.json file:

• How do I override nested NPM dependency versions? - StackOverflow

{
  "dependencies": {
    "vite": "^7",
    "tailwindcss": "^4",
    "@tailwindcss/vite": "^4"
  },
  "overrides": {
    "@tailwindcss/vite": {
      "vite": "^7.0.0"
    }
  }
}

Then install it:

npm install