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

Philipp John · Answer 1 · 2022-12-10T13:31:46.030

13

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

edited Dec 10 '22 at 13:31

answered Dec 10 '22 at 13:31

Philipp John

141
1
4

score 3 · Answer 2 · answered Oct 04 '22 at 11:27

3

Tailwind does not support it yet out of the box, you need to customize your CSS. Either use the experimental text-stroke property, which is not very well supported so I don't recommend it, maybe later, or:

Use text-shadow that works pretty well.

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

answered Oct 04 '22 at 11:27

szabcsee

373
4
12

1

Using text-shadow on paragraph text makes it harder to read. Best on headings and larger text content – wanna_coder101 Nov 14 '22 at 08:35

score 3 · Answer 3 · answered Nov 26 '22 at 17:29

I had this issue as well, but I did not feel that the existing answers gave me a solution that follows Tailwind's utility-first approach.

Instead of creating custom css for a specific element, instead we should create a new tailwind utility class for this purpose.

To do that we alter the main.css tailwind file that holds our configuration and use the @layer base selector.

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

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

This allows us to reference our new class anywhere in our project alongside default tailwind classes, and it additionally works with Tailwind state selectors.

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

this works well, but the downside is that the stroke takes away from the width of the text. — Taylor Johnson, Mar 02 '23 at 20:10

How to have a bordered text in tailwind

3 Answers3