Tailwind CSS 在 Laravel 11+ 中必须通过 Vite 的 JS 入口 import CSS 文件才能生效，仅用 @vite 引入 CSS 或直接写在 Blade 中无效；需确保 app.css 含三行 @tailwind 指令、app.js 显式 import 对应 CSS、content 路径精确覆盖 Blade 文件、配置修改后重启 dev 服务，且 PostCSS 插件完整。
Tailwind CSS 在 Laravel 11+ 中必须通过 Vite 加载，@tailwind 指令不会自动生效，直接写在 Blade 里或只靠 @vite 引入 CSS 文件是无效的——这是最常被卡住的点。
为什么 @vite('resources/css/app.css') 不起作用
Vite 只处理 JS 入口文件，CSS 必须由 JS import 触发才能走 PostCSS 流程。如果 resources/js/app.js 里没写 import '../css/app.css'，哪怕 app.css 里写了 @tailwind base，编译后也完全没效果，控制台还不会报错。
-
resources/css/app.css必须包含三行：@tailwind base;、@tailwind components;、@tailwind utilities; -
resources/js/app.js必须显式import '../css/app.css'（路径要对，注意是../css/不是./css/） - 不要在 Blade 中用
@vite('resources/css/app.css')单独加载 CSS——Vite 不认这个写法
content 路径没覆盖到你的 Blade 文件
Tailwind 的 JIT 编译只打包 content 数组里匹配到的文件中实际用到的类。如果路径写漏了，比如你用了 resources/views/pages/home.blade.php，但 tailwind.config.js 里只写了 "./resources/**/*.blade.php"，看起来没问题，但某些 shell 或 Windows 环境下 glob 匹配可能不一致。
- 推荐写死常用路径：
"./resources/views/**/*.blade.php"、"./resources/views/*.blade.php"、"./resources/js/**/*.js" - 避免用
./**/*.blade.php这种宽泛写法，Vite 启动时可能跳过深层目录 - 改完
tailwind.config.js后必须重启npm run dev，热更新不感知配置变更
Vite 插件和 PostCSS 配置缺一不可
Laravel 11+ 默认已内置 Vite 的 CSS 处理插件，但如果你手动删过 vite.config.js 里的 css 相关配置，或者装了旧版插件，会导致 @tailwind 指令被忽略。
立即学习“前端免费学习笔记（深入）”；
- 确认已安装：
npm install -D tailwindcss postcss autoprefixer - 确认
postcss.config.js存在且内容为默认导出：module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } } - 不需要额外加
vite-plugin-tailwind-purgecss——Laravel 11 的 JIT 模式默认就按需提取，加了反而可能干扰
最容易被忽略的是：Vite 启动后，得等终端输出 “ready in XXX ms” 才算真正加载完 Tailwind 配置；在这之前刷新页面，哪怕代码全对，样式也不会出来。
