tailwind-autofill-plugins.js

plugin(({ addUtilities, variants, theme, e }) => {
      const colors = theme("colors")
      const generateColors = (e, colors, prefix) =>
        Object.keys(colors).reduce((acc, key) => {
          if (typeof colors[key] === "string") {
            return {
              ...acc,
              [`${prefix}-${e(key)}`]: {
                "-webkit-text-fill-color": colors[key],
              },
            }
          }

          const innerColors = generateColors(
            e,
            colors[key],
            `${prefix}-${e(key)}`
          )

          return {
            ...acc,
            ...innerColors,
          }
        }, {})
      const utils = generateColors(e, colors, ".text-fill")

      addUtilities(utils, variants("textFill"))
    }),
    plugin(({ addUtilities, variants, theme, e }) => {
      const colors = theme("colors")
      const generateColors = (e, colors, prefix) =>
        Object.keys(colors).reduce((acc, key) => {
          if (typeof colors[key] === "string") {
            return {
              ...acc,
              [`${prefix}-${e(key)}`]: {
                "--tw-shadow": `0 0 0 9999px ${colors[key]} inset`,
                boxShadow:
                  "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
              },
            }
          }

          const innerColors = generateColors(
            e,
            colors[key],
            `${prefix}-${e(key)}`
          )

          return {
            ...acc,
            ...innerColors,
          }
        }, {})
      const utils = generateColors(e, colors, ".shadow-fill")

      addUtilities(utils, variants("shadowFill"))
    }),
  
//   eslint rules
//   "tailwindcss/no-custom-classname": [
//     "warn",
//     {
//       "whitelist": ["text-fill-.+", "shadow-fill-.+"]
//     }
//   ]