Electron + vite + vue3 使用Tailwind配置在electron vite vue3中使用ta

项目搭建使用的是: electron-vite

Tailwind官网: Tailwind

vite安装tailwind

pnpm install -D tailwindcss

生成配置文件

npx tailwindcss init 生成 tailwind.config.js

复制如下代码

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

创建tailwind.css

src/asstes/css/tailwind.css

复制如下代码

/* /src/asstes/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.js/main.ts文件中引入CSS样式

import { createApp } from 'vue'
import App from './App.vue'
 import './assets/css/tailwind.css' // 引入css文件
const app = createApp(App)
app.mount('#app')

vite.config.js配置

使用 electron-vite 则是 electron.vite.config.js

import tailwindcss from 'tailwindcss';

export default defineConfig({
  main: {
   //...省略一些代码
  },
  preload: {
   //...省略一些代码
  },
  renderer: {
    css: {
      postcss: {
        plugins: [tailwindcss],
      }
    },
      //...省略一些代码
  }
})

使用

具体使用可以参考官网

 <template>
  <div class="box-content h-6">
    标题
  </div>
</template>

其他

vscode Tailwind官方插件: Tailwind CSS IntelliSense - 代码提示
prettier 配置