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?
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' />
