如何在顺风中添加边框文本

Question

我需要文本有黑色边框。

我试过这个，

  <div className="font-bold text-2xl text-white outline-4">
    Hello
  </div>

但它似乎没有给文本加上边框。

Answer 1

我发现自定义顺风投影可以产生最佳结果：

drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]

只需调整像素值和强度，并用作标准顺风属性。

这甚至适用于 svgs。

您可以在此处查看示例

Answer 2

我也遇到了这个问题，但我不认为现有的答案为我提供了遵循 Tailwind 实用程序优先方法的解决方案。

我们不应该为特定元素创建自定义 css，而是应该为此目的创建一个新的 tailwind 实用程序类。

为此，我们更改保存配置的 main.css tailwind 文件并使用 @layer 基本选择器。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .font-outline-2 {
    -webkit-text-stroke: 2px black;
  }
  .font-outline-4 {
    -webkit-text-stroke: 4px black;
  }
}

这使我们能够在项目中的任何位置引用我们的新类以及默认的 tailwind 类，并且它还可以与 Tailwind 状态选择器一起使用。

<h1 class="text-2xl font-bold font-outline-2 hover:font-outline-4">
  Works as expected
</h1>

Answer 3

Tailwind 还不支持开箱即用，您需要自定义 CSS。要么使用实验性的文本笔划属性，该属性没有得到很好的支持，所以我不推荐它，也许稍后，或者：

使用效果很好的文本阴影。

h1 {
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}