1. 安装依赖

pnpm add -D tailwindcss postcss autoprefixer daisyui @tailwindcss/postcss

2. 配置 Tailwind CSS

2.1 配置 tailwind.config.js

在项目根目录中新建 tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2.2 配置 postcss.config.js

在项目根目录中新建 postcss.config.js :

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

3. 配置 DaisyUI

在 src\renderer\src\assets\css 中新建 style.css :

@import "tailwindcss";
@plugin "daisyui";

然后在 src\renderer\src\main.js 中进行引入：

import './assets/main.css'
import './assets/css/style.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

4. 检查是否配置成功

将 App.vue 替换为以下代码：

<script setup>
const ipcHandle = () => window.electron.ipcRenderer.send('ping')
</script>

<template>
  <button class="btn btn-soft btn-primary">Primary</button>
</template>

如果按钮是浅蓝色的，那就代表成功了！