How to have a bordered text in tailwind

Question

I need the text to have a black border.

I tried this,

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

But it doesn't seem put a border to the text.

Answer 1

I found a custom tailwind drop shadow yields the best result:

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

Just adjust the pixel values and intensity, and use as standard tailwind attribute.

This even works on svgs.

You can check out what an example looks like here