box-shadow with same colors as their borders with Tailwind

box-shadow buttons

<div class="mr-4 p-4 rounded-lg border-2 font-bold text-white bg-red-300 border-red-400 shadow-button">border-red-400 shadow-button</div>
<div class="p-4 rounded-lg border-2 font-bold text-white bg-blue-300 border-blue-400 shadow-button">border-blue-400 shadow-button</div>

tailwind.config.js

const _ = require('lodash');
const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        button: '0px 3px 0px 2px var(--current-border-color)',
      },
    },
  },
  corePlugins: {
    borderColor: false,
  },
  plugins: [
    function({ addUtilities, e, theme, variants }) {
      const colors = flattenColorPalette(theme('borderColor'));

      const utilities = _.fromPairs(
        _.map(_.omit(colors, 'default'), (value, modifier) => {
          return [
            `.${e(`border-${modifier}`)}`,
            {
              'border-color': value,
              '--current-border-color': `${value}`, // or something like `${value}80` for 50% opacity
            },
          ];
        }),
      );

      addUtilities(utilities, variants('borderColor'));
    },
  ],
};