在Vue3 + Vite 项目中使用 Tailwind CSS 4.0

首先是我的package.json

{
  "name": "aplumweb",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.3",
    "tailwindcss": "^4.0.3",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "sass-embedded": "^1.83.4",
    "vite": "^6.0.5"
  }
}

根据官网步骤

• npm安装
  官网 https://tailwindcss.com/docs/installation/using-vite
  npm install tailwindcss @tailwindcss/vite

• 配置插件 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ],
})

• 新建 src\styles\index.css

@import "tailwindcss";

• 在main.js中引入这个css

import { createApp } from 'vue'
import './styles/index.css'
import App from './App.vue'

createApp(App).mount('#app')

Tailwind CSS之前 导入基础组件 的三行代码被废弃，用 @import "tailwindcss"; 取代

VS Code安装插件

Tailwind CSS IntelliSense

验证是否引入成功

在App.vue中使用 <div class="bg-red-900">test</div> 验证

• 在网页中呈现出颜色，表示引入成功
  

参考资料

1. 官网

https://tailwindcss.com/docs/upgrade-guide

2. npx tailwindcss init 失效原因（因为tailwindcss 4.0版本不支持这种形式）

https://github.com/tailwindlabs/tailwindcss/discussions/15786

报错 
npx tailwindcss init -p npm ERR! could not determine executable to run  npm ERR! A complete log of this run can be found in:

• 也注意 @tailwind 指令被废除。

3. 参考视频

https://www.youtube.com/watch?v=P5d_UUxqOzs