base styles to set focus

focus.css

:root {
    --focus-outline-width: 2px;
    --focus-outline-offset: 3px;
    --focus-outline-color: currentColor;
    --focus-outline-style: dotted;
}

@layer base {
    :focus {
        @apply transition;
        outline-width: var(--focus-outline-width);
        outline-offset: var(--focus-outline-offset);
        outline-color: var(--focus-outline-color);
        outline-style: var(--focus-outline-style);
    }

    *:focus:not(:focus-visible) {
        outline: none;
    }

    /* Use .focus-nested to set focus styling on direct children of a focussed element */
    *:focus:not(:focus-visible) > .focus-nested {
        outline: none !important;
     }
}

/* 
    Helper classes used when currentColor provides too little contrast 
    (e.g. a white-on-black button on dark background) 
*/

.focus-white,
.focus-white:focus {
    --focus-outline-color: theme('colors.white');
}

.focus-black {
    --focus-outline-color: theme('colors.black')
}
.focus-blue {
    --focus-outline-color: theme('colors.blue.800')
}
.focus-green {
    --focus-outline-color: theme('colors.green.600')
}

forms.css

@layer base {
    /* Remove native browser search reset button */
    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
      appearance: none;
    }
    
    /* Override some of Tailwind's defaults */

    [type='text'],
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [type='checkbox'],
    [type='radio'],
    [multiple],
    textarea,
    select {
        @apply transition rounded;
        box-shadow: none;
        outline-width: 0;
        outline-color: transparent;

        &:focus,
        &:focus-visible,
        /* Override global outline removal */
        &:focus:not(:focus-visible) {
            box-shadow: none;
            outline-width: var(--focus-outline-width);
            outline-offset: var(--focus-outline-offset);
            outline-color: var(--focus-outline-color);
            outline-style: var(--focus-outline-style);
        }
    }
}