bg-clip-text text-transparent相关渐变字体css兼容性问题

bg-clip-text text-transparent 这套写法依赖 CSS property -webkit-background-clip: text， Chrome ≤ 80（及大部分国内 Webview）不认标准写法 background-clip: text，只认带前缀的 -webkit-background-clip: text， 而 Tailwind 在 3.2 之前不会自动补 -webkit-，于是低版本直接“字被裁掉”，表现为空白。

解决思路 ① 让 -webkit-background-clip: text 真正出现在页面； ② 同时保留向后兼容：如果浏览器最终也不支持，至少能降级看到实心颜色文字。

---

1. 临时补丁（最快，不动 Tailwind 源码）

/* src/css/tailwind.css  里加上 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 手动补前缀 */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

2. 更稳的写法（推荐，直接改 HeroBanner）

<h1 className="text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white md:text-6xl">
  构建极速文档站
  <br />
  {/* 渐变字包裹层 */}
  <span
    className="inline-block bg-gradient-to-r from-indigo-500 to-cyan-500 text-transparent"
    style={{
      WebkitBackgroundClip: 'text',
      backgroundClip: 'text',
      /* 低版本兜底：如果渐变失败，至少看到 indigo-500 */
      color: 'var(--fallback-color, #6366f1)',
    }}
  >
    前所未有的简单
  </span>
</h1>

3. 自动补前缀（长期方案，新项目顺手做）

npm i -D autoprefixer@latest

确保 postcss.config.js 里：

module.exports = {
  plugins: {
    autoprefixer: {}, // 必须放在 tailwind 之后
    tailwindcss: {},
  },
}

Tailwind 3.3+ 开始已内置 bg-clip-text 的 -webkit- 输出，升级后就不用自己写补丁了。

---

一句话总结 现在先在 tailwind.css 里手动补 -webkit-background-clip: text， 以后升级 Tailwind ≥ 3.3 即可自动兼容，低版本浏览器就能正常看到“前所未有的简单”了。