Tailwind还不支持它，你需要自定义你的CSS。要么使用实验性的 text-stroke 属性，它不是很好的支持，所以我不推荐它，也许以后，或者：
使用效果很好的文本阴影。

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

我也遇到过这个问题，但我觉得现有的答案并没有给我一个遵循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>

你可以试试

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

有两种方法可以解决你的问题。
1.将div更改为行内元素或
1.你用一个行内元素环绕文本。例如span
第一个