Laravel中自定义CSS被覆盖的根源是第三方框架CSS权重更高或加载更晚；需通过DevTools定位被划掉的规则及其选择器，将自定义CSS置于所有第三方CSS之后加载，并排查Tailwind Purge、Vue scoped样式失效及标签类组合匹配问题，推荐用CSS Modules实现样式隔离。
在Laravel项目中引入自定义CSS后，按钮颜色被重置、表单间距错乱、标题字体变小——这不是你的样式没写对，而是Bootstrap或Tailwind等框架CSS正用更高权重或更晚加载顺序把你写的规则盖掉了。
确认冲突根源：先看DevTools再动手
打开浏览器开发者工具，右键页面任意异常元素 → 选择“检查” → 切到Styles面板；找到你写的类名（比如.my-btn），如果它被划掉且右侧显示来源是bootstrap.min.css或tailwind.css，说明已被覆盖；再点开Computed面板，看当前生效的color、padding等值来自哪条规则，记下它的完整选择器（如.btn.btn-primary或.h-6）。
这一步不能跳过。盲目改权重或调顺序，可能让问题从“按钮不蓝”变成“所有按钮都透明”。【被划掉的规则才是真对手，不是你写的类名，是它背后的选择器】
最稳解法：把自定义CSS塞到最后加载
打开resources/views/layouts/app.blade.php（或你实际使用的主模板）；找到所有标签；确保你的自定义CSS（比如app.css或custom.css）的写在所有第三方CSS之后；典型顺序应为：
立即学习“前端免费学习笔记（深入）”；
→ →
注意：mix()函数生成的URL会自动带哈希，确保浏览器不会读缓存旧文件；如果你用的是直接引用public/css/xxx.css，必须手动保证HTML中顺序正确，否则Webpack构建后的实际输出顺序可能和你写的不一致。
当顺序调好还失效：检查Purge和作用域漏洞
方法一：Tailwind用户重点查Purge配置
打开tailwind.config.js，确认content数组包含所有动态加载的Blade文件路径，例如：
content: ["./resources/**/*.blade.php", "./resources/**/*.js", "./storage/framework/views/*.php"]
如果模态框内容由Axios异步加载create.blade.php，而该文件不在content列表里，生产构建时所有用到的class（如modal-backdrop、p-6）都会被Purge掉，样式必然消失。
方法二：Vue组件里scoped样式对弹窗无效
Element Plus的el-date-picker、Ant Design的DatePicker默认挂载到body下，脱离了.vue文件的scoped作用域；此时在
方法三：避免用button.ant-btn这类标签+类组合
很多UI库通过JS动态加类或使用[class*="ant-btn"]匹配，button标签可能根本不存在；你写的button.ant-btn权重再高也匹配不到真实DOM；换成.my-form .ant-btn，既安全又清晰。
长期防冲突：用CSS Modules隔离业务样式
第一步：在webpack.mix.js中启用CSS Modules
mix.webpackConfig({ module: { rules: [{ test: /\.module\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] }] } });
第二步：把自定义样式文件从app.css改成app.module.css
第三步：在Blade模板中用内联方式引入编译后文件：；或者在JS中import './app.module.css'，让Webpack自动注入。
这样.button会被编译成.button_abc123，天然避开所有框架类名；但注意：.module.css只对显式导入生效，引入的全局CSS仍会参与层叠，所以务必配合前面的加载顺序控制。
