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,]},//配置這個地方----------------------結束----------------------------},}
})

應該沒漏配置了，有漏的話可以評論提醒下我