Add text shadow with Tailwind CSS

The simplest solution is to use the drop-shadow class. You can use it with the usual size parameters, like sm, md, lg, xl .

Problems with drop-shadow

Shadow location

In the background, this solution uses the drop-shadow() filter. This is interesting because the drop-shadow() CSS function applies a drop shadow effect to the input image. By default, the image is the text itself, but as soon as you set a background color, the image becomes the full container and the shadow is not on the text, but on the square container that contains it.

Drop shadow without background color:

<p class="drop-shadow">Lorem ipsum</p>

Drop shadow with background color:

<p class="drop-shadow bg-red-100">Lorem ipsum</p>

Appropriate text shadow with drop-shadow class, using a wrapper:

<div class="bg-red-100">
	<p class="drop-shadow">
		Lorem ipsum
	</p>
</div>

Shadow color

Another problem is changing the color of the shadow. Unfortunately, the shadow-[color] solution used by box-shadow does not work here by default. 

Fortunately, by using arbitrary values we can solve this problem too. The inconvenience is that, in addition to the color, the offset-x and offset-y values must be specified before the color code. However, it is now possible to set the color using shadow-[color] .

<div class="bg-red-100">
	<p class="drop-shadow-[2px_2px_var(--tw-shadow-color)] shadow-blue-500">
		Lorem ipsum
	</p>
</div>

And the result is:

If there is no CSS property in Tailwind, like text-shadow in this case, you can also use square bracket notation to write completely arbitrary CSS: 

<p class="[text-shadow:1px_1px_2px_var(--tw-shadow-color)] shadow-blue-500 bg-red-100">Lorem ipsum</p>

Don't be scared by the title. TailwindCSS can be easily extended with your own plugins. All you need to do is extend the tailwind.config.js file with a few lines of code.

Here are the steps you need to take:

1. Import the plugin library into your config file
   

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

   
   
   
2. Extend the theme object with a textShadow property with various size defaults:
   

   textShadow: {
   	sm: '1px 1px 2px var(--tw-shadow-color)',
   	DEFAULT: '2px 2px 4px var(--tw-shadow-color)',
   	lg: '4px 4px 8px var(--tw-shadow-color)',
   	xl: '4px 4px 16px var(--tw-shadow-color)',
   }, ​

3. Finally add a new plugin to the plugins object:
   

   plugin(function ({ matchUtilities, theme }) {
       matchUtilities(
         {
           'text-shadow': (value) => ({
             textShadow: value,
           }),
         },
         { values: theme('textShadow') }
       )
     }
   )​

A complete tailwind.config.js looks like this:

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

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

}

 From now you can use text-shadow utility class in your template files:

<p class="text-shadow-lg shadow-green-600 bg-red-100">Lorem ipsum</p>