如何在Tailwind CSS中给文字添加平滑描边效果？-css教程-PHP中文网

应优先使用-webkit-text-stroke实现平滑描边，因其走字体光栅化通路，边缘柔顺；text-shadow本质是投影，多层叠加易漏边、发虚，尤其在小字号、retina屏或safari中渲染不稳定。

如何在tailwind css中给文字添加平滑描边效果？

直接用 -webkit-text-stroke，别碰 text-shadow 模拟——后者边缘发虚、不抗锯齿，根本不算“平滑”。

为什么 `text-shadow` 不适合平滑描边

它本质是投影，8 层阴影对齐稍有偏差就漏边；blur-radius 设为 0 能硬凑出轮廓，但小字号下依然毛刺明显，尤其在 Retina 屏或缩放后。Safari 对多层 text-shadow 的渲染也不稳定，iOS 15–16 曾丢影。

所有偏移必须严格 ±1px，不能靠 clamp() 或 em 动态缩放
文字设 color: transparent 时，某些 Safari 版本会直接不画阴影
加 -webkit-font-smoothing: antialiased 反而可能削弱描边锐度

用 `-webkit-text-stroke` 实现真平滑

这是 WebKit 内核原生支持的文字描边属性，走的是字体光栅化通路，边缘和文字本身一样柔顺。Firefox 不支持，但 Chrome/Safari/Edge（Chromium）全量覆盖，现代项目可放心用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

语法固定：-webkit-text-stroke: <width><color></color></width>，例如 -webkit-text-stroke: 2px #3b82f6
描边宽度影响文字视觉重量：1px 在 16px 字号下刚好，2px 以上需同步调大 line-height 防重叠
颜色支持 rgba() 和 CSS 变量，但变量传入需确认构建工具未剔除（Vite 默认保留）
不能和 text-fill-color: transparent 混用在旧 Safari 上——会导致文字消失

如何封装成 Tailwind 类

Tailwind 默认不提供 -webkit-text-stroke 工具类，得手动扩展。别写成响应式类名如 text-stroke-sm，因为描边宽度必须随字号线性缩放，否则高 DPR 下变细不可见。

在 tailwind.config.js 的 theme.extend 中加：

extend: {
  textStroke: {
    '1': '1px var(--stroke-color, currentColor)',
    '2': '2px var(--stroke-color, currentColor)',
    '4': '4px var(--stroke-color, currentColor)',
  }
}

再配 @layer utilities 注册类：

@layer utilities {
  .text-stroke-1 { -webkit-text-stroke: theme('textStroke.1'); }
  .text-stroke-2 { -webkit-text-stroke: theme('textStroke.2'); }
  .text-stroke-4 { -webkit-text-stroke: theme('textStroke.4'); }
}