Tailwind CSS active psuedo class not working for screen readers

I created a button utility class for a React button component. The pseudo classes work great with mouse clicks, but the :active pseudo class doesn't work when I try to navigate/interact with the button via keyboard.

Here is the config:

variants: {
    accessibility: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    backgroundColor: ['responsive', 'hover', 'focus', 'active']
  },

CSS utility classes:

.btn-white {
  @apply text-blue-700;
  @apply font-semibold;
  @apply py-2;
  @apply px-4;
  @apply border;
  @apply border-blue-500;
  @apply rounded-full;
}

.btn-white:hover {
  @apply bg-aaBlue; 
  @apply text-white; 
  @apply border-transparent;
}

.btn-white:focus {
  @apply outline-none; 
  @apply shadow-outline;
}

.btn-white:active {
  @apply bg-red-500
}

And the React component:

<Button 
  onClick={() => setCount(count + 1)}
  className='btn-white'
>
  Click me
</Button>