Tailwind utility for minimum WCAG AAA Target Size

touch-hitbox.css

/* More info: https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=If%20the%20target%20is%20the,44%20by%2044%20CSS%20pixels.&text=A%20footnote%20or%20an%20icon,from%20the%20minimum%20target%20size */

/* touch-hitbox or pointer-coarse:touch-hitbox (mobile-only) */

@utility touch-hitbox {
  position: relative;
  &:before {
    content: "";
    cursor: pointer;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}