新建 vite + vue3 + talwindcss 项目

一、安装 vite

npm create vite@latest

如提示 create-vite: 未找到命令

npm install create-vite -g

二、选择类型

✔ Project name: …  vue3
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

三、运行项目

cd vue3
npm install
npm run dev

四、服务器设置反向代理

根据提示IP和端口进行设置。

五、测试访问

如果能够正常打开页面，表示已经成功，CTRL+C退出运行，继续安装。

六、安装 talwindcss

1. 安装

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 生成配置文件

npx tailwindcss init -p

3. 配置 tailwind.config.js

将原代码替换为

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    darkMode: "class",
}

main.js中的

import './style.css';

替换为

import './assets/css/style.css';

新建assets/css/style.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;