唯一稳定路径是使用@tailwindcss/vite插件并降级vite至7.x；vite 8不支持该插件，导致@import "tailwindcss"无效、样式丢失，且npx tailwindcss init -p因v4移除cli入口而报错，正确命令为npx @tailwindcss/cli init -p。
直接用 @tailwindcss/vite 插件 + 显式指定 Vite 7 是目前唯一能稳定跑通 Tailwind CSS 4 的路径；Vite 8 不支持该插件，强行使用会构建失败或样式全丢。
为什么 npx tailwindcss init -p 报错 could not determine executable to run
Tailwind CSS v4 已移除 CLI 入口，tailwindcss 包本身不再提供 init 命令。中文文档未同步更新，仍沿用 v3 写法，导致命令直接失败。
- 错误命令：
npx tailwindcss init -p→ 必报错 - 正确命令（v4）：
npx @tailwindcss/cli init -p，需先安装@tailwindcss/cli - 但即使命令跑通，后续仍卡在 Vite 8 兼容性上 —— 所以不推荐走 v4 全流程
@import "tailwindcss" 在 Vite 8 中完全无效
Vite 8 无法解析这个语句，因为 @tailwindcss/vite 插件当前（2026 年 8 月）最高只支持到 Vite 7.x。插件缺失时，@import 被当作文本忽略，无报错、无警告、无样式。
- 必须降级 Vite：
npm install -D vite@^7.4.0（不要用vite@latest） - 插件必须显式注册：
plugins: [vue(), tailwindcss()]，不能省略或放错位置 - CSS 入口文件（如
src/assets/tailwind.css）里只写三行：@tailwind base;、@tailwind components;、@tailwind utilities;，不能合并或删减
content 配置漏路径 = 样式白配
Tailwind v4 对 content 字段更敏感，路径不精确会导致类名扫描失败，尤其在 RuoYi-Vue3 这类含 views/、components/、layouts/ 多级目录的项目中。
- 必须覆盖所有模板来源：
"./src/**/*.{vue,js,ts,jsx,tsx}"，不能只写.vue - RuoYi 的
src/views/layouts/*.vue和src/components/*.vue必须被包含，否则菜单、布局等区域类名丢失 - 动态 class（如
:class="'text-' + size"）不会被扫描，需加safelist或改用twMerge
最易被忽略的是：Vite 8 + Tailwind CSS 4 组合目前没有官方可行路径，所有“看似成功”的配置，背后大概率是插件未生效但你没察觉 —— 检查浏览器开发者工具的 Elements 面板里是否有 bg-blue-500 对应的生成样式，而不是只看控制台有没有报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
