vue3环境搭建Tailwind CSS
1、创建vue3项目
创建项目：npm create vite@latest vue3app01 --template vue
进入项目文件夹：cd vue3app01
加载默认库：npm install
测试运行：npm run dev
2、搭建tailwind css
（1）引入 Tailwind
npm install -D tailwindcss postcss autoprefixer
（2）创建用于初始化 Tailwind 的配置文件——生成 tailwind.config.js、postcss.config.js
npx tailwindcss init -p
修改 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}","./node_modules/flowbite/**/*.js"],theme: {extend: {},},plugins: [require('flowbite/plugin'),],corePlugins: {// 取消 tailwindcss 的默认样式preflight: false}
}（3）编写css文件，路径自定义
src\assets\main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
（4）main.js引入
import './assets/main.css'
（5）vue测试
src/comptents/helloword.vue
<template><div class="w-32 h-32 bg-blue-500">hello</div><h1 class="text-3xl text-red-500">Tailwind CSS</h1>
</template>
效果
