1、安装tailwindcss

pnpm i -D tailwindcss postcss autoprefixer
# yarn add -D tailwindcss postcss autoprefixer
# npm i -D tailwindcss postcss autoprefixer

2、创建TailwindCSS配置文件

npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}", // 匹配所有 Vue/JS/TS 文件],theme: {extend: {},},plugins: [],
}

postcss.config.js

export default {plugins: {tailwindcss: {},autoprefixer: {},},
}

3、在main.js同级创建style.css

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

4、在main.js中引入tailwindcss与style.css

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import "tailwindcss/tailwind.css";const app = createApp(App);app.mount('#app')

5、vite.config.js配置tailwindcss

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'//配置这个地方----------------------开始----------------------------
import tailwindcss from 'tailwindcss'
//配置这个地方----------------------结束----------------------------export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd());return {plugins: [vue(),],css: {//配置这个地方----------------------开始----------------------------postcss: {plugins: [tailwindcss,]},//配置这个地方----------------------结束----------------------------},}
})

应该没漏配置了，有漏的话可以评论提醒下我