根本原因是Tailwind默认不处理浏览器底层渲染差异：form-select在Safari有阴影而Chrome没有；display:flex在iOS 13.3及更早被直接忽略；aspect-ratio在Safari 15.4前不识别；必须分层干预——用@tailwindcss/forms统一表单、browserslist驱动前缀、动态伪类兜底WebKit特性。
Tailwind CSS 在不同浏览器中样式不一致，根本原因不是“类没写对”，而是它默认不处理底层渲染差异——form-select 在 Safari 有阴影、Chrome 没有；display: flex 在 iOS 13.3 及更早版本里直接被忽略；aspect-ratio 在 Safari 15.4 前压根不识别。必须分层干预：靠插件统一表单、靠 browserslist 驱动前缀、靠动态伪类兜底 WebKit 特性。
表单控件跨浏览器不一致必须用 @tailwindcss/forms
只加 appearance-none 是无效的。它只是移除了默认 UI，但没补上 padding、font-size、focus ring 的统一逻辑，更没处理 Safari 的下拉箭头点击穿透或 Firefox 的 checkbox 尺寸错位。
- 安装后必须在
tailwind.config.js的plugins数组里显式添加require('@tailwindcss/forms')，且确保它在@tailwind base之后加载 -
form-select和form-checkbox这类语义化基础类，会自动重置margin、padding、line-height和appearance，不用改 HTML 结构 - 自定义
select图标时，得手动加pointer-events-none到图标元素上，否则 Safari 点击下拉区域会失效 - 旧版 Safari（iOS 13.3 及更早）对
appearance: none支持不稳定，建议配合@supports (-webkit-appearance: none)写降级样式
display: flex / grid 在旧版 Safari 里完全不生效
不是样式错乱，是整条 CSS 被浏览器跳过。iOS 13.3 及更早版本不认识 display: flex，只认 display: -webkit-flex，而 Autoprefixer 是否生成这个前缀，全看 browserslist 配置是否命中。
- 在
.browserslistrc中必须显式写ios_saf >= 11.3或safari >= 10，不能只写last 2 versions—— 它默认跳过低占比旧版 Safari - 运行
npx browserslist确认输出里真有ios_saf 11.3这类条目，否则构建时 Autoprefixer 根本不会跑 -
flex容器子项撑不满高度？大概率是min-width: auto阻断了拉伸，加min-w-0或手写[min-width:0]才能修复 -
place-items在 Safari 12–14 不稳定，拆成justify-items-center+align-items-center更可靠
Autoprefixer 不补的属性必须手动干预
aspect-ratio、overscroll-behavior、scrollbar-width、text-overflow 这些属性，Autoprefixer 根本不生成前缀，Tailwind 也不提供对应工具类。得用 Tailwind 的动态伪类语法原样输出，且注意 Safari 的隐性前提。
立即学习“前端免费学习笔记（深入）”；
- 隐藏滚动条必须写
[&::-webkit-scrollbar]:hidden，不是[::-webkit-scrollbar]:hidden；而且容器必须有overflow-y-auto，否则滚动功能会丢 -
text-overflow: ellipsis要求父容器同时有white-space: nowrap和overflow: hidden，缺一不可；truncate类已内置这两条，但自定义截断时容易漏 -
aspect-ratio: 16/9在 Safari 15.4 前完全不支持，必须用@supports not (aspect-ratio: 1/1)降级为relative+pt-[56.25%]方案 -
overscroll-behavior-y: contain在 iOS Safari 中只对「已进入可滚动状态」的容器生效，意味着父容器必须有明确高度（如h-96），且不能含transform或will-change
Tailwind v4 升级后旧浏览器大面积失效
v4 主动放弃对 Chrome 109、iOS Safari ≤13.3、Android WebView ≤11 的支持，核心原因是用了 @layer、oklch() 颜色、@property 等原生不兼容特性。这些语法在旧解析器里直接报错或静默丢弃，任何 post-process 工具都救不回来。
-
@layer base包裹的 preflight 重置规则，在 IE11 和 iOS Safari ≤13.3 中被识别为 “unknown at-rule”，整块 CSS 被跳过 -
theme.colors.blue.500编译为color: oklch(50% 0.2 270)，旧浏览器无法解析，导致所有text-blue-500类全部失效 -
postcss-preset-env或toColorSpace: 'srgb'对@layer和@property完全无能为力 - 唯一稳态解是降级到
tailwindcss@3+daisyui@4，v3 使用纯 CSS2.1 + Flex/Grid 基础语法，经大量旧环境验证
真正容易被忽略的点是：开发时热更新看着正常，不代表构建后 CSS 生效。必须运行 npm run build，打开 dist/assets/*.css 文件，搜索 -webkit-、-ms-、@layer、oklch 这些关键词，才能确认配置链是否真通。很多问题卡在 browserslist 没命中，或者插件顺序错了，但 DevTools 里根本看不出端倪。
