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

原创已于 2025-02-04 17:47:16 修改 · 6.7k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-02-04 17:08:41 首次发布

CSS 专栏收录该内容

3 篇文章

订阅专栏

文章目录

首先是我的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