You can make use ring- and outline to achieve the focus. Maybe we can have a .focus-ring { @apply ... } class so that we can easily add focus-ring to components with just 1 class since the focus rings are all the same.
You can also use focus-visible:ring-* for the pseudo class instead of just focus: so it doesn't show that often
mentioned in https://github.com/AfterClass-io/afterclass.io-v2/pull/82#issuecomment-2067683705