Migration to tailwind v4 is not working

[vincenzoml]

Describe the bug

I went trough the full tailwind v4 migration path but tailwind classes don't work with electron vite (I tried to update to v3.0.0 too). In electron.vite.config.ts I haveimport tailwindcss from "@tailwindcss/vite" which yields the error: Cannot find module '@tailwindcss/vite' or its corresponding type declarations. There are types at <OMITTED>/node_modules/@tailwindcss/vite/dist/index.d.mts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.ts(2307)

In tsconfig.node.json I have

{
  "extends": "./tsconfig.json"
}

and in tsconfig.json I have

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.json",
  "exclude": ["node_modules", "src/**/*.js"],
  "include": ["src/**/*.ts", "src/**/*.svelte", "src/preload/api.ts"],
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "Bundler",
    "verbatimModuleSyntax": false,
    "useDefineForClassFields": true,
    "strict": true,
    "allowJs": true,
    "checkJs": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable", "ES2022"],
    "esModuleInterop": true,
    "noEmitOnError": false,
    "baseUrl": ".",
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$src/*": ["src/*"]
    },
    "skipLibCheck": true
  }
}

Electron-Vite Version

3.0.0

Electron Version

28.3.3

Vite Version

5.4.11

Validations

• [x] Follow the Code of Conduct.
• [x] Read the Contributing Guidelines.
• [x] Read the docs.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

Bad tsconfig. The Svelte template has been updated:

see https://github.com/alex8088/quick-start/tree/master/packages/create-electron/playground/svelte-ts

or

npm create @quick-start/electron@latest my-app -- --template svelte

Remember to set "moduleResolution": "Bundler" in tsconfig.web.json.

[vincenzoml]

Thanks! So are you suggesting to re-scaffold the project from scratch? I can try. However I get

This file contains the result of Yarn building a package

(OMITTED)

Script name: postinstall

• electron-builder version=25.1.8 • loaded configuration file=/Users/vincenzo/data/local/repos/OMITTED/electron-builder.yml ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed and version ("^35.0.3") is not fixed in project. See https://github.com/electron-userland/electron-builder/issues/3984#issuecomment-504968246

[vincenzoml]

AI suggested to remove the caret before the electron version in package.json, I did, I installed packages, but on start the app quits immediately:

vite v6.2.3 building SSR bundle for development... ✓ 1 modules transformed. out/preload/index.js 0.42 kB ✓ built in 13ms

build the electron preload files successfully

---

dev server running for the electron renderer process at:

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose

start electron app...

(node:64658) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated. (Use Electron --trace-deprecation ... to show where the warning was created) (node:64658) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated. (Use Electron --trace-deprecation ... to show where the warning was created

[vincenzoml]

Claude AI fixed the error for me, and this is what it said (unfortunately I don't have a diff with the scaffolded template but I could produce one if needed)

First, we added electronVersion: "25.9.8" to the electron-builder.yml file to explicitly specify the Electron version to use for building.

Then, we identified that the error was related to Yarn's Plug'n'Play (PnP) mode, which was causing compatibility issues with Electron. The specific error (Cannot read properties of undefined (reading 'length')) was occurring because Electron has known issues with PnP.

We created a .yarnrc.yml file with nodeLinker: node-modules to switch from PnP to the traditional node_modules approach, which is more compatible with Electron applications.

[Kinqdos]

I get the same problem in react. I created a new project with @quick-start/electron and react-ts and I am unable to to add tailwindcss vite plugin.

[PabloVSouza]

@Kinqdos you just need to edit tsconfig.node.json and in the compilerOptions, add "moduleResolution": "bundler".

[marijnbent]

The original error is fixed for me, but I still get the following error when starting the app.

[vite:css][postcss] Unable to find uri in '@import('tailwindcss')'
1  |  @import('tailwindcss');```