您应该在config中启用focus变体中的border类：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      border: ['focus'],
    }
  },
}

或者，如果你想改变宽度，这将工作：

ring-2

如果要更改颜色，应执行以下操作：

focus:ring-blue-500

https://tailwindcss.com/docs/ring-width

这个回答帮助了我：
https://github.com/tailwindlabs/tailwindcss/discussions/1889#discussioncomment-23241
需要注意的是，@apply不适用于内联伪类或其他实用程序的响应变体，而是将该实用程序的普通版本应用到适当的伪选择器或新的媒体查询中：

/* Won't work: */
    .btn {
      @apply block bg-red-500;
      @apply hover:bg-blue-500;
      @apply md:inline-block;
    }

    /* Do this instead: */
    .btn {
      @apply block bg-red-500;
    }
    .btn:hover {
      @apply bg-blue-500;
    }
    @screen md {
      .btn {
        @apply inline-block;
      }
    }