use outline in additon to box-shadow

Author: GavinJoyce

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-question-mark",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A plugin that provides a helpful `?` dev time utilit",
   "main": "src/index.js",
   "license": "MIT",

src/index.js

@@ -3,14 +3,19 @@ const plugin = require('tailwindcss/plugin')
 module.exports = plugin(function({ addUtilities, e }) {
   addUtilities({
     [`.${e('?')}`]: {
-      'animation': `${e('?')}wobble 0.5s ease-in-out alternate infinite`
+      'outline-style': 'solid',
+      'animation': `${e('?')}wobble 0.6s ease-in-out alternate infinite`
     },
     [`@keyframes ${e('?')}wobble`]: {
       '0%': {
-        'box-shadow': 'inset 4px 4px rgb(236, 15, 170), inset -4px -4px rgb(236, 15, 170)'
+        'outline-width': '4px',
+        'outline-color': '#f16bc9',
+        'box-shadow': 'inset 4px 4px #f16bc9, inset -4px -4px #f16bc9'
       },
       '100%': {
-        'box-shadow': 'inset 8px 8px rgb(236, 15, 170), inset -8px -8px rgb(236, 15, 170)'
+        'outline-width': '6px',
+        'outline-color': '#f71fb6',
+        'box-shadow': 'inset 6px 6px #f71fb6, inset -6px -6px #f71fb6'
       },
     }
   });