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.

Use the `border-2` class. "2" can be replaced by `4`, `8`, etc. — Yousaf, Dec 28 '21 at 07:40
That bring border around the text like a div. But need a text outlined in black @Yousaf — Sai Krishnadas, Dec 28 '21 at 07:45
@SaiKrishnadas Could you be more precise about the goal ? How is this supposed to look like? Maybe image resolve the problem better.... ? — MarioG8, Dec 28 '21 at 08:06

score -1 · Answer 1 · answered Dec 28 '21 at 07:43

-1

you can try it

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

answered Dec 28 '21 at 07:43

mohamad_sdg

That bring border around the text like a div. But need a text outlined in black – Sai Krishnadas Dec 28 '21 at 07:44
i think that in addition `outline-4` you must also leave the `outline` – mohamad_sdg Dec 28 '21 at 07:50
I think he is asking for an outline to follow the text, like a 'stroke' setting in photoshop. NOT to add a border to the div that contains the text... I wasn't able to find a solution for tailwind, but this answer worked for me: https://stackoverflow.com/questions/2570972/css-font-border – Hazy Jan 27 '22 at 00:11

Maik Lowrey · Answer 2 · 2021-12-28T10:23:05.780

-1

Two ways to do that for you case.

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

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

edited Dec 28 '21 at 10:23

answered Dec 28 '21 at 08:14

Maik Lowrey

Could you please present your code so we can see the results? – MarioG8 Dec 28 '21 at 08:31

2 Answers2