官方文档

Installing Tailwind CSS with Vite - Tailwind CSS

image-20260905133404899

安装依赖

1

pnpm add tailwindcss @tailwindcss/vite
bash

配置vite插件

electron.vite.config.ts

为什么要@ts-expect-error，查看 解决 Tailwindcss 报错：没有与此调用匹配的重载 | 知兀的博客

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

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

export default defineConfig({
  main: {},
  preload: {},
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [
      react(),
+     // @ts-expect-error
+     tailwindcss()
    ]
  }
})
diff

导入Tailwind CSS

src/renderer/src/assets/globals.css

文件名随便

1

@import "tailwindcss";
css