Whenever I run my React-Vite it says [plugin:vite:esbuild] The service is no longer running

Question

After running the npm run dev, it shows this:

[plugin:vite:esbuild] The service is no longer running

My config files are properly set up although I don't have a config file for PostCSS also.

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/postcss';

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

I tried updating the esbuild but it's still the same.

Answer 1

Solution #1: TailwindCSS v4 & Vite without PostCSS (recommended)

Since you're using Vite, you don't need PostCSS. TailwindCSS v4 provides a separate plugin for both Vite (@tailwindcss/vite) and PostCSS (@tailwindcss/postcss).

To inject TailwindCSS into Vite, you only need to install the following packages:

npm install tailwindcss @tailwindcss/vite

Then, modify the vite.config.js file as follows:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' /* instead of @tailwindcss/postcss */

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

After that, you just need to insert the import into your CSS file:

@import "tailwindcss";

• Get Started TailwindCSS v4 with Vite - TailwindCSS v4 Docs

Solution #2: PostCSS & Vite with TailwindCSS v4

If you insist on using PostCSS, you only need to install the following packages:

npm install tailwindcss @tailwindcss/postcss postcss

After that, you need to associate PostCSS with Vite,

• a.) modify the postcss.config.js file as follows:

  export default {
    plugins: {
      '@tailwindcss/postcss': {},
    },
  }
  

  Since Vite automatically uses PostCSS if a postcss.config.js file exists, you don't need to explicitly associate it with Vite. The installed TailwindCSS plugin will work accordingly.

  vite.config.file in this case:

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default {
    plugins: [
      react(),
    ],
  }
  

• b.) or modify the vite.config.js file as follows:

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [
      react(),
    ],
    css: {
      postcss: {
        plugins: {
          '@tailwindcss/postcss': {},
        },
      },
    },
  });
  

  For inline PostCSS config, it expects the same format as postcss.config.js. But for plugins property, only array format can be used.

  • css.postcss - Vite Docs

After that, you just need to insert the import into your CSS file:

@import "tailwindcss";

• Get Started TailwindCSS v4 with PostCSS
• css.transformer - Vite Docs

Some related information about TailwindCSS v4

• Automatic Source Detection - StackOverflow
• Deprecated: preprocessors support - StackOverflow
• Removed @tailwind directives - StackOverflow
• New CSS-first configuration instead of legacy JavaScript-based - StackOverflow