最新Vue3 Vite安装Tailwind CSS 4.0 教程

先说版本

"vue": "^3.5.13",

"vite": "^6.2.1",

"tailwindcss": "^4.0.15",

先创建一个vue3项目

成功跑起来

输入安装

npm install tailwindcss @tailwindcss/vite

在vite.config.js中加入这两句

import tailwindcss from '@tailwindcss/vite'

tailwindcss(),

在项目中创建一个css文件 并在main.js引入

@import "tailwindcss";

import './css/tailwind.css'

现在试下效果

<h1 class="text-sky-400 text-2xl">Tailwind CSS</h1>