add customization options

Author: mrcelo

src/index.js

@@ -1,22 +1,45 @@
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
 
-module.exports = plugin(function({ addUtilities, e }) {
-  addUtilities({
-    [`.${e('?')}`]: {
-      'outline-style': 'solid',
-      'animation': `${e('?')}wobble 0.6s ease-in-out alternate infinite`
-    },
-    [`@keyframes ${e('?')}wobble`]: {
-      '0%': {
-        'outline-width': '4px',
-        'outline-color': '#f16bc9',
-        'box-shadow': 'inset 4px 4px #f16bc9, inset -4px -4px #f16bc9'
-      },
-      '100%': {
-        'outline-width': '6px',
-        'outline-color': '#f71fb6',
-        'box-shadow': 'inset 6px 6px #f71fb6, inset -6px -6px #f71fb6'
-      },
-    }
-  });
-});
+module.exports = plugin.withOptions(
+  ({
+    animationDuration = "0.6s",
+    animationName = "wobble",
+    boxShadowInsetStart = "4px",
+    boxShadowInsetEnd = "6px",
+    enableAnimation = true,
+    highlightColor = "#f16bc9",
+    outlineWidthStart = "4px",
+    outlineWidthEnd = "6px",
+    outlineStyle = "solid",
+  } = {}) => {
+    return function ({ addUtilities, e }) {
+      const animation = enableAnimation
+        ? `${e(
+            "?"
+          )}${animationName} ${animationDuration} ease-in-out alternate infinite`
+        : "none";
+
+      addUtilities({
+        [`.${e("?")}`]: {
+          "outline-style": outlineStyle,
+          "outline-width": outlineWidthStart,
+          "outline-color": highlightColor,
+          "box-shadow": `inset ${boxShadowInsetStart} ${boxShadowInsetStart} ${highlightColor}, inset -${boxShadowInsetStart} -${boxShadowInsetStart} ${highlightColor}`,
+          animation: animation,
+        },
+        [`@keyframes ${e("?")}${animationName}`]: {
+          "0%": {
+            "outline-width": outlineWidthStart,
+            "outline-color": highlightColor,
+            "box-shadow": `inset ${boxShadowInsetStart} ${boxShadowInsetStart} ${highlightColor}, inset -${boxShadowInsetStart} -${boxShadowInsetStart} ${highlightColor}`,
+          },
+          "100%": {
+            "outline-width": outlineWidthEnd,
+            "outline-color": highlightColor,
+            "box-shadow": `inset ${boxShadowInsetEnd} ${boxShadowInsetEnd} ${highlightColor}, inset -${boxShadowInsetEnd} -${boxShadowInsetEnd} ${highlightColor}`,
+          },
+        },
+      });
+    };
+  }
+);