这里以vue3为例，其他的框架只要是vite配置的也可参考这个

项目创建

Vite 需要 Node.js 版本 18+ 或 20+

npm create vite@latest my-vue-app

创建完执行命令运行项目

 cd my-vue-appnpm installnpm run dev

项目正常运行即可

css_14">安装和初始化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: [],
}