Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Support Text Shadow Utilities in Tailwind CSS

Tailwind CSS, a utility-first CSS framework, offers a lot of features to streamline the process of styling web applications. This article stands as a comprehensive guide as to why the text shadow utility isn’t supported by default in Tailwind CSS as of 2023, and how to customize and meet the needs of using text shadow utility classes. Also, we’ll go over several text shadow effects and how they can be done with Tailwind CSS.

Problems with drop-shadow

In the background, a solution is filtered with dropshadow() filters. The CSS function dropshadow() has dropshadow effect to the input images. The image is usually text in itself. However when setting the background color the image becomes the full container while the shadows don’t appear in text but in an area of rectangles. Drop shadow with background color: Drop shadow with background color: Adequate text shadow by dropshadow class. Another problem involves changing shadow colors. Unfortunately, box shadow’s shadow-color option doesn’t always work for this application.

Prerequisites

To follow this article, you should have basic knowledge of Tailwind CSS and how to set it up either with a plain HTML, or a framework of choice.

Recap on the Text Shadow Property

The text-shadow property in CSS is for adding shadows to text as the name implies. The property accepts a comma-separated list of shadows, implying that the shadows can be stacked over each other. The value consists of a combination of X and Y offset, blur radius, and color.

Here’s the text-shadow syntax:

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px #000;

Both the offset-x and offset-y values are required values, while the blur-radius and color values are optional.

There are other variations the text-shadow value could take, to learn more about the various values, please read the documentation here.

Why is Text Shadow not supported by default?

As of 2023, the point of writing this article, the text-shadow utility isn’t supported by Tailwind, even though, it’s a crucial CSS property we’d likely use from time to time, cause it’s the only way to add shadows to text.

The creator of Tailwind CSS, Adam Wathan, once posted on Twitter (rather, X now πŸ˜…), about why the text-shadow utility isn’t supported. Here is his tweet:

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

You can open the tweet here

Adam Wathan's post about why Text shadow isn't supported in Tailwind CSS

The tweet was posted on March 25, 2022, and up to 2023, the text-shadow utilities haven’t been supported.

From Adam’s tweet, we can deduce that supporting the text-shadow utilities isn’t a problem, but it’s coming up with good defaults, like what should the offset length (X and Y) be, what colors should be used for the shadow, and so on.

Going back to 2017, Adam replied to an issue on GitHub about adding the text-shadow utility to Tailwind CSS, as add the text-shadow utilities yourself.

Adam Wathan replied to an issue about adding Text shadow support to Tailwind CSS

Here’s the link to the issue

With all that, how do we add text shadow support in Tailwind CSS ourselves?

How to Add Text Shadow Support to Tailwind CSS

To add text shadow support to Tailwind CSS, there are two methods. The first method, which is the quickest is done manually, so the power that comes with using utility classes would be lost, and that’s using arbitrary properties. The second method would be creating a custom plugin, specifying the text-shadow utilities you need for your project.

1. Using arbitrary properties

Arbitrary properties allow you to add any CSS property that Tailwind doesn’t support out of the box. To use arbitrary properties, we have to use the square bracket notation to write the arbitrary CSS, in our case the text shadow property.

Here’s the syntax below:

<p class="[text-shadow:1px_1px_5px_#000">Hello World</p>

Notice the use of the underscore (_) character, instead of whitespaces. To know why, read more about that here.

2. Using custom plugin

Plugins in Tailwind let you register new styles into the user’s stylesheet using JavaScript instead of CSS.

Now, to create a custom plugin, go to the tailwind.config.js file, and add the code snippet below:

const plugin = require('tailwindcss/plugin');

module.exports = {
  content: [...],
  theme: {
    extend: {
      textShadow: {
        DEFAULT: '0 2px 4px #000',
        sm: '0 2px 2px #000',
        lg: '0 4px 10px #000',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      );
    }),
  ],
};

From the code snippet above, you’ll notice that the textShadow property was extended from the theme object, but since Tailwind doesn’t know what the textShadow property is, we’ll have to create a plugin that tells Tailwind to utilize the Text shadow utilities specified, that is DEFAULT, sm, and lg.

The plugin function imported is used to create the plugin, which takes in a callback function with an object argument, that has matchUtilities, and theme functions.

The matchUtilities function is used to register new dynamic styles, and it maps the values defined in the theme configuration.

To learn more about creating plugins for utilities, components, and variants, please visit the documentation here.

To see the list of supported theme configurations that Tailwind supports, visit this repo

To use the newly created plugin for text shadow, we’ll do this:

 <p class="text-3xl text-shadow">Hello World</p>
 <p class="text-3xl text-shadow-sm">Hello World</p>
 <p class="text-3xl text-shadow-lg">Hello World</p>

Here’s the preview (but zoomed in):

Hello World text shadow effects
Hello World text shadow effects

With this, we can congratulate ourselves, cause we’ve officially added support for text shadow to Tailwind CSS.

Sadly, there’s a problem, with this approach cause we can’t change the colors of the shadow, in the config, we had a fixed color black, #000, and it’ll be nice to make the color dynamic, also making use of Tailwind CSS colors.

So then, how do we add shadow colors?

How to add shadow colors to text in Tailwind

Tailwind CSS comes with a lot of amazing colors that are leveragable and extendable.

To add shadow colors, we’ll need to change the tailwind.config.js file to this:

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');

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

All that’s different is the use of the custom variable, that Tailwind provides, var(–tw-shadow-color).

Now that we have changed the config file, our current setup wouldn’t work again because we now need to specify the color we want to use.

<p class="text-3xl text-shadow">Hello World</p>
<p class="text-3xl text-shadow-sm">Hello World</p>
<p class="text-3xl text-shadow-lg">Hello World</p>

We get these plain Hello World texts now, with no shadow color.

Hello world

To fix this, we’ll specify the color we want based on the Box Shadow Color utilities that Tailwind provides. Despite the utility being called the box shadow color, it’ll still work fine with our current setup and can be used for text shadow because the utility properties are just custom variables like this: –tw-shadow-color: #d4d4d4.

Notice it’s the same custom variable we made use of, in the tailwind.config.js file.

To fix the shadow for the Hello World example, we’ll just add the box shadow color utilities, like this:

<p class="text-3xl text-shadow shadow-orange-700">Hello World</p>
<p class="text-3xl text-shadow-sm shadow-green-500">Hello World</p>
<p class="text-3xl text-shadow-lg shadow-cyan-400">Hello World</p>

Here’s how it looks now, aren’t those colors beautiful 😎

Hello world texts with text shadows

Since we making use of the box shadows color by Tailwind, if we extend that utility we’ll still be able to make use of the newly added shadow color. Also, we can make use of arbitrary values to test shadow color quickly.

Arbitrary values are like this text-shadow-[0px_1px_5px_#000], to know more about it, visit the documentation here

In as much as creating text-shadow effects is cool, you should also try out Purecode.ai which allows you to use prebuilt components nicely styled with Tailwind CSS, check us out to learn more.

Custom Plugin or Arbitrary Property, which should I use?

The methods to use while creating text shadow effects depends on your use case. If you’d like to create a text shadow effect you don’t plan or reusing, you’ll just have it in one place, then it’s a no brainer to make use of Arbitrary property syntax, where you just add the shadow effect where you need it.

But if it’s a text shadow effect you’ll you’ll like to reuse in multiple sections of your web application, then using a custom plugin would be the best way to go. In the next section, we’ll go over a plugin that takes the customization of text-shadow effects to the next level.

Tailwind text shadow plugin

A plugin created by DesignByCode takes things further, with even more customization. Here’s the plugin documentation on npm.

The plugin allows you to dynamically change individual parts of the text-shadow value, by using utilities to change the X and Y offset, blur radius, and colors.

To learn more about the plugin, watch the video below:

Examples of Text shadow effects

Now that we know how to add support for Tailwind Text shadow, let’s go over some text shadow effects.

In the section, as a bonus tip, we would also go over how to register new styles to the components layer in Tailwind, so we can reuse the same styles in several places and also easily change the styles with other utility classes.

The text shadow effect shown in this section was all inspired by this codepen which utilizes Syntactically Awesome Style Sheets (SASS).

Example 1

Vintage text shadow effect
<h2 class='
 bg-[#a52a2acf]
 text-[skyblue] 
 font-[lobster] 
 text-shadow-[
   1px_1px_0px_#fff,
   2px_3px_0px_#00000040
 ]
'>
  Vintage
</h2>

From the snippet above, the Tailwind arbitrary value is used to add the text-shadow values.

However, the problem with arbitrary values is that you might forget the values if you need to apply the same text shadow effects to another text.

To solve this problem, we can add the text shadow property to the component layer in Tailwind, so we can always reuse the same text shadow styles. Another advantage of this approach is that you can easily change the styles with other Tailwind utility classes.

Let’s see how to add the text shadow effect to the component layer.

// tailwind.config.js file

const plugin = require('tailwindcss/plugin');

module.exports = {
  content: [...],
  theme: {
    extend: {
      textShadow: {
        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
        sm: '0 2px 2px var(--tw-shadow-color)',
        lg: '0 4px 10px var(--tw-shadow-color)',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, addComponents, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      );
      addComponents({
        '.vintage': {
          textShadow: '1px 1px 0px #fff,2px 3px 0px #00000040',
        },
      });
    }),
  ],
};

The newly added addComponents plugin function is used to add the new styles in the tailwind.config.js file. Notice, it is more like your regular CSS syntax, but written in CSS-JS syntax.

Now the vintage utility class properties can be used in place of the text-shadow arbitrary value, resulting in the same styles with no difference.

<h2 class='bg-[#a52a2acf] text-[skyblue] font-[lobster] vintage'>
  Vintage
</h2>

Doesn’t it just look much cleaner? 😊

Example 2

Many shadow effect
<h2 class='
 bg-[#282828]
 text-[#fff] 
 text-shadow-[
   -1px_1px_0_rgba(255,255,255,.5),
   -2px_2px_0_rgba(255,255,255,.10),
   -3px_3px_0_rgba(255,255,255,.15),
   -4px_4px_0_rgba(255,255,255,.20),
   -4px_4px_0_rgba(255,255,255,.25),
   -5px_5px_0_rgba(255,255,255,.30),
   -5px_5px_0_rgba(255,255,255,.35)
  ]'
>
  Many Shadows
</h2>

As discussed previously, let’s see a better approach to handling the text shadow effect and making it reusable.

// tailwind.config.js file

plugins: [
    plugin(function ({ matchUtilities, addComponents, theme }) {
      matchUtilities( ... );
      addComponents({
        '.vintage': {
          textShadow: '1px 1px 0px #fff,2px 3px 0px #00000040',
        },
        '.many-shadow': {
          textShadow:
            '-1px 1px 0 rgba(255,255,255,.5), -2px 2px 0   rgba(255,255,255,.10),-3px 3px 0 rgba(255,255,255,.15), -4px 4px 0 rgba(255,255,255,.20),-4px 4px 0 rgba(255,255,255,.25), -5px 5px 0 rgba(255,255,255,.30),-5px 5px 0 rgba(255,255,255,.35)',
        },
      });
    }),
  ],

The many-shadow utility class can be used like this:

<h2 class='bg-[#282828] text-[#fff] many-shadow'>
  Many Shadows
</h2>

Differences between box-shadow, drop-shadow, and text-shadow

Tailwind CSS supports two shadow effects utilities by default which are drop shadow and box shadow. Now, that we’ve seen how to add text shadow utilities to Tailwind CSS, let’s go over the difference.

1. Box shadow

The box-shadow property is used to add shadow effects around an element’s frame, following the box model, hence the name box-shadow. In Tailwind, the utility is named shadow-[modifier], where the modifiers can either be sm, md, lg, xl, 2xl, inner, or none. The box-shadow utility is also used with the shadow color utility.

Syntax of box-shadow in Tailwind CSS

<div class='shadow-2xl shadow-slate-900 p-5'>
  Box Shadow Effect
</div>

Note the box shadow property values are described by three required length values horizontal offset, vertical offset, blur radius, and two optional values – inset, spread radius, and the color value which is required.

box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

To learn more about the box-shadow property, visit MDN-Box Shadow, CSS Tricks Box Shadow

2. Drop shadow

The Drop shadow CSS function applies a shadow effect that conforms to the shape of its container, be it an image or block element. Using the drop shadow effect is more suitable with images, cause it can adapt to the image shape.

With Tailwind CSS the utility goes by drow-shadow-[modifier]

// utility          // property
drop-shadow-sm	    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));

The drop shadow CSS function has four parameters in total. The offset-x, offset-y, standard-deviation and color.

drop-shadow([offset-x] [offset-y] [standard-deviation optional] [color optional])	   

drop-shadow(5px 5px 15px red)

Learn more about the Drop shadow effect here, MDN-Drop Shadow, CSS Tricks – Box shadow vs Drop Shadow

3. Text shadow

In the previous sections of this article, we’ve gone over the text-shadow property, but one thing to note is that using the text shadow property, the shadow effects only apply to texts and nothing else.


Here’s a tabular view of the difference between box-shadow, drop-shadow, and text-shadow.

box-shadowdrop-shadowtext-shadow
SpecificationCSS Backgrounds and Borders Module Level 3Filter Effects Module Level 1CSS Text Module Level 3
Browser SupportGoodFair – Not supported in IEGood
Applies toThe CSS box model – Applies to the rectangular box around an elementThe actual shape of an element – Ignores the box modelText content
Blur calculationBased on pixel lengthBased on the stdDeviation attribute of the SVG filterBased on pixel length
Inset shadowsSupportedNot supportedSupported
PerformanceNot hardware acceleratedHardware accelerated in supporting browsersNot hardware accelerated

With the differences you should know when to use one effect or the other.

Final Thought on Tailwind Text Shadow

Wow, we’ve come to the end of the article and touched on the different ways we can add text shadow support to TailwindCSS, we’ve looked at an easy way of just using arbitrary properties and also a not so complicated way of using custom plugins, to make the text shadow effect just as you’d want it. Also, we’ve gone over the difference between box-shadow, drop-shadow, and text-shadow and what they apply to.

Further resources that can help you with understanding shadows are listed below:

Once again, with Purecode.ai you can save development time by making use of custom components, that are nicely styled, responsive, and extendable. Start using Purecode today!

Favourite Jome

Favourite Jome