在Vue3 + Vite 项目中使用 Tailwind CSS 4.0
文章目录
- 首先是我的package.json
- 根据官网步骤
- VS Code安装插件
- 验证是否引入成功
- 参考资料
首先是我的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> 验证
- 在网页中呈现出颜色，表示引入成功
参考资料
- 官网
https://tailwindcss.com/docs/upgrade-guide
- 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指令被废除。
- 参考视频
https://www.youtube.com/watch?v=P5d_UUxqOzs