在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