How to Add Text Shadow In Tailwind CSS

If you prefer not to update the Tailwind CSS configuration, you can use JIT mode to apply the following styles directly:

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

Alternatively, to use classes like shadow-red-500, you can do this:

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

Why No Official Support? 🤷‍♂️

Currently, Tailwind CSS does not officially support text-shadow classes. Adam Wathan, the creator of Tailwind CSS, recently tweeted:

“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 challenge isn’t implementing the feature but deciding which default shadows to include. Adam explains:

“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.”

While we wait for official support, we can add text-shadow classes ourselves.

Adding Text Shadow Classes to Tailwind CSS

To add text shadow classes, update your tailwind.config.js with 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') }
      );
    }),
  ],
};

That’s it! Now, you can use text-shadow shadow-red-500 to add a beautiful red text shadow with Tailwind CSS, without needing custom CSS.

Available Classes

Our configuration adds the following Tailwind CSS classes:

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

Feel free to add more classes as needed. You can explore the possibilities with a Tailwind Play example.

These new classes will also appear in Tailwind CSS IntelliSense, making them easy to use while typing text-sh.

Note the use of var(--tw-shadow-color). This is crucial as it allows us to combine Tailwind CSS shadow color classes with the text-shadow classes we’ve added.

I hope this helps!