这里以vue3为例，其他的框架只要是vite配置的也可参考这个
项目创建
Vite 需要 Node.js 版本 18+ 或 20+
npm create vite@latest my-vue-app
创建完执行命令运行项目
cd my-vue-appnpm installnpm run dev
项目正常运行即可
安装和初始化tailwindcss相关插件
安装相关插件
npm install -D tailwindcss postcss autoprefixer
初始化命令
npx tailwindcss init -p
初始化完毕后找到tailwind.config.js，内容如下：
/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}引入配置
方式一：在App.vue进行引入
<script setup>
</script><template><h1 class="text-3xl font-bold underline">Hello world!</h1>
</template><style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>方式二：也可以单独建一个css文件,内容就是下面代码的style标签内的代码，然后在main.js里面导入这个css文件，例如在src/style.css里面加的下面三行代码，则在main.js里面新增import './style.css'即可，这里个人写习惯了，直接在App.vue里面写了
上面配置完之后，启动项目npm run dev后就可以在页面使用tailwindcss的类样式了
vscode提示插件Tailwind CSS IntelliSense
下面贴一份个人使用的tailwind.config.js的默认配置
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {colors: { // 背景颜色和文本颜色 bg-blue text-white 等blue: 'blue',white: 'white',pink:'pink'},width: (() => { // 元素宽度 w-0(0rem) - w-1000(rem) 宽高范围跟着UI图走的const widths = {};for (let i = 0; i <= 750; i++) {widths[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值}return widths;})(),height: (() => { // 元素高度 h-0(0rem) - h-1448(1448rem) 宽高范围跟着UI图走的const height = {};for (let i = 0; i <= 1448; i++) {height[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值}return height;})(),fontSize: (() => { // 字体大小 text-0(0rem) - text-100(100rem) const fontSize = {};for (let i = 0; i <= 1000; i++) {fontSize[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值}return fontSize;})(),lineHeight: (() => { // 行高值 leading-5const lineHeight = {};for (let i = 0; i <= 300; i++) {lineHeight[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值}return lineHeight;})(),spacing: (() => { // 上下左右间距 left/right/bottom/top left-60const spacing = {};for (let i = 0; i <= 1448; i++) {spacing[`${i}`] = `${i}rem`;}return spacing;})(),margin: (() => { // 上下左右间距const margin = {};for (let i = 0; i <= 750; i++) {margin[`${i}`] = `${i}rem`;}return margin;})(),zIndex: (() => { // 层级const zIndex = {};for (let i = 0; i <= 100; i++) {zIndex[`${i}`] = `${i}`;}return zIndex;})()},},plugins: [],
}
