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.

Animalize

Use the border-2 class. "2" can be replaced by 4, 8, etc. – Silures

That bring border around the text like a div. But need a text outlined in black @Silures – Animalize

@SaiKrishnadas Could you be more precise about the goal ? How is this supposed to look like? Maybe image resolve the problem better.... ? – Raynaraynah

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

Frenchify

Answer 2

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>

Goad

this works well, but the downside is that the stroke takes away from the width of the text. – Angelo

Answer 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;
}

Izard

Using text-shadow on paragraph text makes it harder to read. Best on headings and larger text content – Sanbenito

Just as an update, now -webkit-text-stroke property is supported by all major browsers. – Pilkington

Answer 4

just use this basic and actually works

  <style>
    .specialtext
    {
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke-width: 1px;
    }
  </style>

Catron

Answer 5

In case someone faces this in the future. I think a more robust approach would be to add a custom utility class. This has the benefit that it gets treated like an actual tailwind utility class, you can use custom values for example using the -[] syntax. You can also import tailwind values from the default theme.

Here is the plugins for anyone who wants to use them, just copy them into your tailwind.config, and make sure to import plugin and flattenColorPalette as so.

enjoy :)

import plugin from 'tailwindcss/plugin';
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';

    plugins: [
        plugin(function ({ matchUtilities, theme }) {
            matchUtilities(
                {
                    'font-stroke': (value) => ({
                        '-webkit-text-stroke-width': value
                    })
                },
                {
                    values: {
                        ...theme('borderWidth'),
                        thin: 'thin',
                        medium: 'medium',
                        thick: 'thick'
                    }
                }
            );
        }),
        plugin(function ({ matchUtilities, theme }) {
            matchUtilities(
                {
                    'font-stroke': (value) => ({
                        '-webkit-text-stroke-color': value
                    })
                },
                {
                    values: flattenColorPalette(theme('colors'))
                }
            );
        })
    ]

Note: I just noticed, that because I have both utility classes with the same name, using -[] won't work, and will result in the following warning.

The class `font-stroke-[0.5px]` is ambiguous and matches multiple utilities

I am not sure how tailwind does it, because the border somehow magically understands for example border-[0.5px] and border-[#1f1f1f] works, if someone knows that would be great.

Radome

Answer 6

I had the same issue and couldnt find a decent solution. So I came up with a very ugly solution: putting the text in a (disabled) button, this way I was able to put a border around the text only.

Programmer