How to Add Text Shadow Support to Tailwind CSS

It's worth noting that if you don't want to update the Tailwind CSS config, then you can use JIT to write the following.

<h1 class="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">Hello</h1>

And if you still want to be able to use classes such as shadow-red-500 you can do this.

<h1 class="[text-shadow:_0_1px_0_var(--tw-shadow-color)]">Hello</h1>

Why No Support? 🤷‍♂️

At the moment, there is no official support for text-shadow classes in Tailwind CSS and in fact, in a recent tweet Adam Wathan, the creator of Tailwind CSS said this:

What CSS feature that Tailwind doesn't have baked in do you find yourself getting the most irrationally angry about? Need ideas for v3.1

In before text-shadow — harder than it sounds, one day, I'm sorry

The reason for this is justified, it's not the implementation that's difficult (as you will see), it's the execution.

The hard part is choosing the default shadows to include. I've spent probably 20 hours on the problem so far and still haven't come up with a good way to approach it. What are all the problems they solve, how many sizes do we need, do they need to support colors, etc.

What to do while we wait? Easy. We'll do it ourselves.

Adding Text Shadow Classes to Tailwind CSS

In your tailwind.config.js add the following:

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color)',
        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
        lg: '0 8px 16px var(--tw-shadow-color)',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      )
    }),
  ],
}

And that's it.

We can now write text-shadow shadow-red-500 and have a beautiful red text shadow appear, fully created with Tailwind CSS and zero custom CSS.

All I did was follow the adding plugins documentation and it worked.

Our code added the following Tailwind CSS classes:

• text-shadow
• text-shadow-sm
• text-shadow-lg

But you can add as many as you like. Here's how they look.

The classes that have been added will appear in Tailwind CSS IntelliSense when writing something like text-sh for example.

It's worth noting the use of var(--tw-shadow-color). This is important as it allows us to use Tailwind CSS shadow-[color] classes with the text-shadow classes we've added.

And there we have it.

That's all it takes to add text-shadow support to Tailwind CSS while it's not in the core.