解决 Tailwind CSS v4 + Vite 8 中 @import "tailwindcss" 不起作用的问题
问题描述
最近在Vue 3 项目中引入 Tailwind CSS v4 时，遇到了一个问题：在 style.css 中按照官方文档写入
css
@import "tailwindcss";但样式完全没有生效，Tailwind 的工具类无法使用。
问题原因
经过排查，发现问题出在 Vite 8 与 Tailwind CSS v4 的兼容性问题上。
Tailwind CSS v4 需要一个 Vite 插件 @tailwindcss/vite 来正确处理 @import "tailwindcss" 语句，但该插件目前只支持 Vite 5-7，不支持 Vite 8。
当你直接使用 @import "tailwindcss" 而没有配置插件时，Vite 无法解析这个导入，导致 Tailwind 样式无法注入。
解决方案
方案一：降级 Vite 到 v7（推荐）
这是最稳妥的方案，可以完整使用 Tailwind CSS v4 的所有功能。
步骤 1：安装 Tailwind CSS v4 和 Vite 插件
bash
npm install -D vite@7 @tailwindcss/vite步骤 2：配置 vite.config.js
javascript
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()],
})步骤 3：在 CSS 文件中引入 Tailwind
css
/* src/style.css */
@import "tailwindcss";步骤 4：确保 CSS 文件被引入到主入口
javascript
// src/main.js
import { createApp } from 'vue'
import './style.css' // 确保这行存在
import App from './App.vue'
createApp(App).mount('#app')方案二：等待 Vite 8 兼容
如果你必须使用 Vite 8，可以暂时使用 Tailwind CSS v3，或者等待 @tailwindcss/vite 插件更新支持 Vite 8。
验证是否生效
启动开发服务器：
bash
npm run dev在 Vue 组件中测试 Tailwind 类名：
vue
<template>
<div class="p-4 bg-blue-500 text-white">
Tailwind CSS 正常工作！
</div>
</template>如果看到蓝色背景的文字，说明配置成功。
版本兼容性
| 组件 | 版本 |
|---|---|
| Vite | 7.x |
| Tailwind CSS | 4.x |
| @tailwindcss/vite | 4.x |
常见错误
错误 1：npm install 报错 ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error Found: vite@8.0.0
npm error peer vite@"^5.2.0 || ^6 || ^7" from @tailwindcss/vite@4.2.1解决：明确指定安装 Vite 7
bash
npm install -D vite@7 @tailwindcss/vite错误 2：样式仍然不生效
检查以下几点：
- CSS 文件是否正确引入到 main.js
- vite.config.js 是否已添加 tailwindcss 插件
- 是否重启了开发服务器
- 浏览器是否清除了缓存
总结
Tailwind CSS v4 引入了新的 CSS-first 配置方式，但需要配合 Vite 插件才能正常工作。在 Vite 8 刚发布不久的情况下，暂时降级到 Vite 7 是最稳妥的选择。
希望这篇文章能帮你少走弯路！