Início / coding / Perguntas / 79562593
Accepted
InfiniteVoid
Asked: 2025-04-09 00:26:48 +0800 CST

Electron-vite + React + Tailwindcss v4

  • 772

Tenho o tailwindcss v4 para funcionar com outros aplicativos como um plugin vite no vite.config.tsarquivo.

Semelhante a isto:

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

Não tenho certeza se essa é a abordagem correta ao usar electron-vite, pois todas as abordagens que tentei não funcionam.

Minha electron-viteconstrução é

npm create @quick-start/electron@latest

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

Removi todos os arquivos /assetse adicionei um único global.cssque contém:

@import "tailwindcss";

Estou recebendo o erroCannot find module '@tailwindcss/vite' or its corresponding type declarations. 


import tailwindcss from '@tailwindcss/vite'

Meu electron.vite.config.tsarquivo se parece com isso

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()]
  }
})

Já tentei usar um postcss.config.js. Mas na versão 4 deve ser tão fácil quanto o descrito no blog tailwindcss-v4 :

npm i tailwindcss @tailwindcss/postcss;

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

@import "tailwindcss";

Ainda não encontrei nenhuma documentação sobre isso. Alguém tem uma solução?

reactjs

1 respostas

  1. Best Answer

    Vejo que o quick-startpacote que você está usando é menos mantido. Eu seguiria os guias oficiais para instalar Electron + Vite + React + TailwindCSS v4, como segue.

    Crie um projeto Electron com React por Vite

    Execute o comando de instalação, onde você especifica o nome do seu projeto: o comando criará o projeto em uma pasta com esse nome. Selecione a opção "Outros". Neste ponto, você pode escolher entre vários kits de instalação e, por padrão, encontrará o do "Electron". Selecione "Electron". Agora você pode especificar o framework que deseja usar, que é o "React". Seu projeto será criado com TypeScript por padrão. Assim que a instalação for concluída, você estará pronto.

    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

    Agora, você deve ter um vite.config.tsarquivo como este:

    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
        : {},
    }),
  ],
}

    Instalar TailwindCSS v4 com Vite

    Você só precisa instalar o TailwindCSS no Vite usando o plugin @tailwindcss/vite.

    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";
    • 0

relate perguntas