Extremely Slow Cold Start (40s+) with Vite + Tailwind CSS v4 Starter Project

[vbuzin]

A fresh Vite starter project configured with React, TypeScript, and Tailwind CSS v4 (using @tailwindcss/vite) experiences an extremely long cold start time of over 40 seconds for the development server (vite). This occurs in what is essentially an empty starter project.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Vite project: pnpm create vite@latest my-app -- --template react-ts
2. cd my-app
3. Install Tailwind CSS and related dependencies: pnpm add -D tailwindcss @tailwindcss/vite
4. Initialize Tailwind CSS: npx tailwindcss init (this creates tailwind.config.js)
5. Configure tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   export default {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

6. Update vite.config.ts to include the Tailwind CSS plugin:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite' // Import the plugin

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()], // Add the plugin
})

7. Update src/index.css to include the Tailwind directive:

@import "tailwindcss";

8. Ensure src/main.tsx imports src/index.css.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

9. Run the development server: pnpm run dev --profile (or vite --profile)
   vite-profile-0.cpuprofile
10. Observe the long startup time.

Expected behavior The Vite development server should start within a few seconds for a minimal starter project.

Actual behavior The cold start takes 40+ seconds.

Environment:

OS: Linux (Debian GNU/Linux 12 bookworm in a dev container)
Node.js version: v22.15.0
pnpm version: 10.10.0
Vite version: 6.3.5
@tailwindcss/vite version: 4.1.5
tailwindcss version: 4.1.5
@vitejs/plugin-react-swc version: 3.9.0

Relevant Configuration Files:

package.json

vite.config.ts:

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    host: true,
  },
  plugins: [react(), tailwindcss()],
});

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html', // For your root index.html
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Additional context The project is running inside a dev container. The issue is specifically with the cold start; subsequent hot module reloads (HMR) are instantaneous.

[vbuzin]

It turned out the culprit is pnpm, with npm everything works as expected. Cross-posted to pnpm/pnpm#9507, closing this one.