When extending TailwindCSS' theme, how can I include a new class that uses two drop-shadow() rules?

Question

I'm creating a React App with TailwindCSS. I'm using the built-in drop-shadow-md utility class, which, in CSS, is equal to the following rule as per the Tailwind docs:

filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))

What I need to do is simply turn the y-offset values in both function calls (the second argument for the drop-shadow function) to negative values, because I want to use the same computation to display a shadow on the top of a component (a navbar fixed to the bottom of the screen of a PWA).

So far I've been able to extend my theme by adding a custom class md-top, but I can only add the first drop-shadow() call that the original drop-shadow-md class includes. I can't find the way to add the second drop-shadow() call.

This is the relevant part of my tailwind.config.js file:

theme: {
    extend: {
      dropShadow: {
        'md-top': '0 -4px 3px rgb(0 0 0 / 0.07)',
      }
    },
  },

How can I add that second function call in the Tailwind configuration file?

Answer 1

An alternate solution is to register a plugin, as described in (Tailwind's Docs).

In your tailwind.config.js file, in the plugins section, add this:

const plugin = require('tailwindcss/plugin') // import Tailwind's 'plugin' function

module.exports = {
  content: [],
  theme: {},
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.custom-shadow':
          { 'filter': 'drop-shadow(0 -4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 -2px 2px rgb(0 0 0 / 0.06));' }
      }
      )
    }),
  ]

Then, in your jsx, it's accessible via the new class name custom-shadow like this:

<div className='custom-shadow' />

Hovering in VScode shows the expected CSS output!