Electron-vite + React + Tailwindcss v4

Question

Ive got tailwindcss v4 to work with other applications as a vite plugin in the vite.config.ts file.

Similar to this:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

I'm unsure if this is the correct approach when using electron-vite tho as every approach Ive attempted does not work.

My electron-vite build is

npm create @quick-start/electron@latest

✔ Select a framework: › react
✔ Add TypeScript: …  / Yes
✔ Add Electron updater plugin: …  / Yes
✔ Enable Electron download mirror proxy: …  / Yes

Ive removed all files in /assets and added a single global.css that contains:

@import "tailwindcss";

Im getting the error Cannot find module '@tailwindcss/vite' or its corresponding type declarations.

import tailwindcss from '@tailwindcss/vite'

My electron.vite.config.ts File looks like this

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [react(), tailwindcss()]
  }
})

Ive already attempted to use a postcss.config.js. But In v4 it should be as easy as stated in the tailwindcss-v4 blog:

npm i tailwindcss @tailwindcss/postcss;

export default {
  plugins: ["@tailwindcss/postcss"],
};

@import "tailwindcss";

I haven't found any documentation on this yet either. Does someone have a fix?

Answer 1

I see that the quick-start you're using is a less maintained package. I would follow the official guides for installing Electron + Vite + React + TailwindCSS v4, as follows.

Create Electron project with React by Vite

Run the installation command, where you specify your project name: the command will create the project in a folder with that name. Select the "Others" option. At this point, you can choose from several installation kits, and by default, you'll find the one for "Electron". Select "Electron". Now you can specify the framework you want to use, which is "React". Your project will be created with TypeScript by default. Once the installation is complete, you're done.

npm create vite@latest my-electron-vite-project

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
❯   Others

? Select a variant: › - Use arrow-keys. Return to submit.
    Extra Vite Starters (create-vite-extra) ↗
❯   Electron (create-electron-vite) ↗

# Choose your preferred front-end framework language
? Project template: › - Use arrow-keys. Return to submit.
    Vue
❯   React
    Vanilla

# Enter the project to download dependencies and run them
cd my-electron-vite-project
npm install
npm run dev

• Scaffolding your first Vite project - Electron Vite Docs

Now, you should have a vite.config.ts file like this:

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'
import react from '@vitejs/plugin-react'

export default {
  plugins: [
    react(),
    electron({
      main: {
        entry: 'electron/main.ts',
      },
      preload: {
        input: path.join(__dirname, 'electron/preload.ts'),
      },
      renderer: process.env.NODE_ENV === 'test'
        ? undefined
        : {},
    }),
  ],
}

Install TailwindCSS v4 with Vite

You just need to install TailwindCSS in Vite using the @tailwindcss/vite plugin.

npm install tailwindcss @tailwindcss/vite

vite.config.ts

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // import here

export default {
  plugins: [
    tailwindcss(), // use here
    react(),
    electron({
      main: {
        entry: 'electron/main.ts',
      },
      preload: {
        input: path.join(__dirname, 'electron/preload.ts'),
      },
      renderer: process.env.NODE_ENV === 'test'
        ? undefined
        : {},
    }),
  ],
}

global.css

@import "tailwindcss";

• Get started TailwindCSS with Vite - TailwindCSS v4 Docs