在 laravel 11 中，自定义全局 css 必须通过 vite 编译注入，不可直接 link 引用 resources/css/ 下文件；需确保 vite.config.js 存在、app.css 含 @tailwind 指令、app.js 导入该 css、blade 中用 @vite 同时声明 css 和 js 入口，并验证 public/build/ 下生成带哈希的 css 文件。
在 Laravel 11 新项目中，自定义全局 CSS 必须通过 Vite 编译后注入 HTML，不能直接用 <link> 硬引用 resources/css/ 下的源文件——因为该目录不对外暴露，浏览器访问会直接 404。
确认项目使用 Vite 作为默认构建工具
新建的 Laravel 11 项目已移除 Laravel Mix，默认启用 Vite。检查 package.json 中是否存在 vite 和 vite-plugin-laravel 依赖；运行 npm run dev 启动的是 Vite 开发服务器而非 Webpack。
若误装了 Mix 或手动删过 Vite 相关配置，需重置：执行 composer remove laravel-mix 并确保 vite.config.js 存在且未被注释。
将自定义 CSS 写入 resources/css/app.css
打开 resources/css/app.css，在默认的 Tailwind 引入语句下方追加你的样式规则：
@tailwind base;<br>@tailwind components;<br>@tailwind utilities;<br><br>/* 你的全局样式从此开始 */<br>.my-global-button { @apply py-2 px-4 bg-blue-600 text-white rounded; }
⚠️ 注意：不要删除或移动前三行 @tailwind 指令——它们是 Tailwind 功能生效的前提，缺失会导致所有 utility class 失效。
确保 Vite 正确加载 CSS 入口文件
打开 resources/js/app.js，确认首行已存在：import '../css/app.css';
这行代码让 Vite 在构建时解析并打包该 CSS 文件。如果被误删，Vite 将完全忽略 app.css，页面不会加载任何自定义样式。
这一步操作起来很简单，直接把文件拖进去就行。
在 Blade 布局中注入 Vite 资源
编辑 resources/views/layouts/app.blade.php，在 标签内插入：
@vite(['resources/css/app.css', 'resources/js/app.js'])
【必须同时列出 CSS 和 JS 入口】 —— 单独写 @vite(['resources/css/app.css']) 会导致 HMR（热更新）失效，且生产环境可能漏掉 JS 依赖。
Vite 插件会自动将编译后的带哈希名的 CSS 和 JS 注入 HTML，并启用开发时的实时刷新。
验证是否生效
启动开发服务器：npm run dev
打开浏览器，访问任意路由，按 F12 打开开发者工具 → Network → Filter 输入 .css，应看到类似 /build/assets/app.xxx.css 的请求返回 200。
若看到 404，请立即检查：public/build/ 目录是否存在（Vite 默认输出路径），不存在说明 Vite 未成功运行或入口路径写错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
