Tailwind CSS在Laravel中启用后重置原生样式，需禁用preflight、用@layer base接管基础样式、加tw-前缀隔离类名，并用twMerge合并动态类以避免冲突。
Tailwind CSS在Laravel项目中一启用，原生button变透明、input边框消失、h1字号被压小——这不是你写错了类名，而是Tailwind的@tailwind base（即preflight）在页面加载初期就重置了HTML标签样式，第三方UI库或Laravel Blade默认样式根本来不及响应。
关掉Preflight恢复原生样式
第一步：打开tailwind.config.js文件，在corePlugins对象中添加preflight: false配置项。
第二步：保存后必须重启Vite开发服务器——HMR不会重建preflight规则，不重启则配置无效。
第三步：刷新页面，检查button是否恢复默认背景色和边框；若仍透明，说明第三方组件库CSS未加载或被其他层覆盖。
立即学习“前端免费学习笔记（深入）”；
用@layer精准接管基础样式
在resources/css/app.css顶部添加以下代码，位置必须在@tailwind base之前：
@layer base { button { @apply bg-gray-50 border border-gray-300 text-gray-700 rounded-md px-4 py-2; } input[type="text"], input[type="email"], input[type="password"] { @apply border border-gray-300 rounded-md px-3 py-2; }}
这一步把按钮和输入框的默认样式声明到@layer base，使其与Tailwind的base层同级竞争。注意：@layer base块必须写在@tailwind base指令之前，否则会被覆盖。
加前缀隔离工具类，避免类名撞车
方法一：修改tailwind.config.js，设置prefix: 'tw-'（末尾短横线不能少）。
方法二：将模板中所有Tailwind类手动补上前缀，例如class="p-4 text-center"改为class="tw-p-4 tw-text-center"。
方法三：动态类拼接时同步加前缀，如className={\`tw-flex \${isOpen ? 'tw-block' : 'tw-hidden'}\`}——漏掉任意一个，该类就失效。
注意：@apply生成的类会自动带tw-前缀，但手写CSS里的.btn、第三方组件的.el-button完全不受影响，无需改动。
用twMerge合并动态类，防止padding冲突
第一步：安装npm install tw-memoize tw-merge（或pnpm add tw-merge）。
第二步：在JSX/Blade组件中导入并使用：import { twMerge } from 'tw-merge'。
第三步：替换原有动态类写法，例如：className={twMerge('tw-p-2', isBig && 'tw-p-6')}——这样当isBig为真时，tw-p-2会被自动剔除，只保留tw-p-6。
关键提醒：传入twMerge的所有参数都必须是tw-开头的类名，混入'p-2'这种无前缀类，它就当没看见，两个类同时保留，最终padding冲突照旧。
