NextJs+TailwindCSS项目-webkit-text-stroke非Chrome浏览器不生效问题求解

• 仅声明了-webkit-text-stroke带前缀属性，未添加W3C标准的无前缀text-stroke属性，Firefox、旧版Edge、部分版本Safari等非纯webkit内核浏览器无法识别带前缀属性，导致描边不生效。
• 类名优先级存在冲突风险：className中同时声明了自定义类outline-title和Tailwind内置类text-white，若自定义CSS引入顺序早于Tailwind CSS，text-white的白色字体设置会覆盖自定义类中的透明字体设置，导致描边被白色字体遮挡，看起来无描边效果。

方案1：补全CSS属性+移除冲突类（推荐，改动最小） #

1. 移除HTML类名中的text-white属性，你需要透明字体实现描边效果，该类属于冗余冲突属性：

<div className="outline-title pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values & Process
</div>

2. 补全自定义CSS中的标准属性，适配所有支持文本描边的现代浏览器：

.outline-title {
  color: transparent;
  /* webkit内核浏览器兼容 */
  -webkit-text-stroke: 2px black;
  /* 标准属性，适配Firefox等其他现代浏览器 */
  text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

方案2：使用Tailwind任意值写法（无需自定义CSS） #

如果使用Tailwind v3+，可以直接用内置的任意值写法实现效果，优先级最高，无需额外写自定义CSS：

<div className="text-transparent pb-2 text-5xl font-bold text-center mb-12 mt-8 [-webkit-text-stroke:2px_black] [text-stroke:2px_black]">
      Values & Process
</div>

方案3：text-shadow模拟描边（全浏览器兼容） #

如果需要兼容不支持text-stroke的老旧浏览器，可以用多层text-shadow模拟描边效果，所有浏览器都支持：

.outline-title {
  color: transparent;
  /* 2px黑色描边模拟 */
  text-shadow: 
    2px 0 0 #000,
    -2px 0 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    1px 1px #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

内容的提问来源于stack exchange，提问作者agoumi