Estoy creando una aplicación React con TailwindCSS. Estoy usando la clase de utilidad drop-shadow-md incorporada, que, en CSS, es igual a la siguiente regla según los documentos de Tailwind :
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) Lo que debo hacer es simplemente cambiar los valores de compensación y en ambas llamadas de función ( el segundo argumento para la función drop-shadow paralela ) a valores negativos , porque quiero usar el mismo cálculo para mostrar una sombra en la parte superior de un componente (una barra de navegación fijada en la parte inferior de la pantalla de una PWA).
Hasta ahora he podido ampliar mi tema agregando una clase personalizada md-top , pero solo puedo agregar la primera llamada drop-shadow() que incluye la clase drop-shadow-md original. No puedo encontrar la manera de agregar la segunda llamada drop-shadow() .
Esta es la parte relevante de mi archivo tailwind.config.js :
theme: { extend: { dropShadow: { 'md-top': '0 -4px 3px rgb(0 0 0 / 0.07)', } }, },¿Cómo puedo agregar esa segunda llamada de función en el archivo de configuración de Tailwind?
Una solución alternativa es registrar un complemento, como se describe en ( Documentos de Tailwind ).
En su archivo tailwind.config.js , en la sección de complementos, agregue esto:
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));' } } ) }), ] Luego, en su jsx, es accesible a través del nuevo nombre de clase custom-shadow como este:
<div className='custom-shadow' />¡Pasar el cursor sobre VScode muestra el resultado esperado de CSS!
