Vite5+Vue3整合Tailwindcss详细教程

创建vite项目

执行命令：

npm create vite

启动项目

npm install -g pnpm 
pnpm i
pnpm dev

浏览器访问

http://localhost:5174/

整合Tailwindcss

安装依赖

pnpm install -D tailwindcss postcss autoprefixer

初始化配置文件

npx tailwindcss init

用webstorm打开项目

webstorm配置启动

webstorm启动项目

postcss.config.js

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./src/**/*.{html,js,vue}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

第一个案例

src/App.vue

<template>
  <div>
    <h1 class="text-3xl font-bold underline bg-indigo-500">你好Vue3</h1>
  </div>
</template>

效果预览