如何在顺风中有一个边缘文本

Question

我需要文本有黑色边框。

我试过这个，

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

但它似乎并没有为文本设置一个边框。

Answer 1

“顺风”还不支持它，你需要定制你的CSS。要么使用实验性的https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke属性，这不是很好的支持，所以我不推荐它，也许以后，或者：

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

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

Answer 2

我也有这个问题，但我不认为现有的答案给了我一个解决方案，遵循泰尔风的实用-第一方法。

与其为特定元素创建自定义css，不如为此目的创建一个新的顺风实用程序类。

为此，我们更改保存配置的main.css顺风文件，并使用@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状态选择器。

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

Answer 3

你可以试试

 <div className="font-bold text-2xl text-white border-2 border-black">
    Hello
  </div>