테일윈드 커스텀 css 적용하기 box-shadow

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        'gradi-to': '#1A344A',
        'gradi-from': '#4A4676',
        'gray-100': '#E6E6E6',
        'gray-200': '#B3B3B3',
        'gray-300': '#7B7B7B',
        'gray-400': '#8F8F8F',
        'pointPurple-100': '#BB40F1',
        'pointPurple-200': '#BC4096',
      },
      dropShadow: {
        '3xl': [
          '0px 10px 8px rgba(0, 0, 0, 0.2)',
          '0px 4px 3px rgba(0, 0, 0, 0.2)',
        ],
      },
    },
  },
  plugins: [],
};

tailwind.config.js 

//---
return (
    <button
      onClick={(e, item) => {
        if (isLogin) {
          e.stopPropagation();
          bookmarkHandler(item);
        } else {
          alert('로그인해야 가능합니다');
        }
      }}
    >
      {item.isBookmarked ? (
        <Img
          src="/images/bookmark/bookmarkOn.png"
          alt="활성화된 북마크"
          size={size}
        />
      ) : (
        <Img
          src="/images/bookmark/bookmarkOff.png"
          alt="활성화된 북마크"
          size={size}
        />
      )}
    </button>
  );
};

export default BookmarkButton;

const Img = tw.img`
  ${({ size }) => size}
  drop-shadow-3xl
`;