Tailwind V4 在vite安装流程依赖安装 Vite 配置在 Vite 配置文件 vite.config.ts

依赖安装

npm install tailwindcss @tailwindcss/vite

Vite 配置

在 Vite 配置文件 vite.config.ts 中添加 @tailwindcss/vite 插件

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

导入css

跟v3需要导入三个不同，v4只需要导入一个

建议把导入语句放在src/style.css，这个文件下面，vue3项目新建后自动生成，在main.js自动引入了

@import "tailwindcss";

测试

<div class="bg-blue-500 text-white p-4">
  Tailwind 测试 - 这应该是蓝色背景
</div>