This will generate `shadow-outline-*` utilities for all the colors (including your own custom-defined colors).

generate-shadow-outline.tailwind.config.js

const colors = require('@tailwindcss/ui/colors')

module.exports = {
  // ...
  theme: {
    // ...
    extend: {
      // ...
      colors: {
        brand: colors.indigo,
        success: colors.green,
        danger: colors.red,
        warning: colors.orange,
        info: colors.blue,
        normal: colors.gray,
        lightSurface: 'hsl(210, 20%, 98%)',
      },
      boxShadow: (theme) => {
        const variants = {}
        const allColors = theme('colors')
        for (const colorName in allColors) {
          const color = allColors[colorName]
          variants[`outline-${colorName}`] = `0 0 0 3px ${
            typeof color === 'string' ? color : color['300']
          }`
        }
        return variants
      },
    },
  },
  // ...
}