Add form element focus styling

src/components/generic/form/Checkbox.tsx

@@ -25,7 +25,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             ref={ref}
             type="checkbox"
             id={id}
-            className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
+            className={`appearance-none w-8 h-8 border rounded-md focus:outline-none focus-within:shadow-border checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
               props.disabled
                 ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
                 : ''

src/components/generic/form/InputWrapper.tsx

@@ -21,7 +21,7 @@ export const InputWrapper = ({
         ? 'border-red-500'
         : disabled
         ? 'border-gray-200'
-        : ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
+        : ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary focus-within:shadow-border'
     }`}
   >
     {children}

tailwind.config.js

@@ -13,6 +13,9 @@ module.exports = {
         primaryDark: '#1E293B',
         secondaryDark: '#0F172A',
       },
+      boxShadow: {
+        border: '0 0 0 1px #67ea94',
+      },
     },
   },
   variants: {},