在 Tailwind CSS 中单击一次后聚焦一组按钮

Question

我有 4 行，每行三个按钮。

《顺风》播放链接

我想要的是

当我单击第一行中 3 个按钮中的任意一个时，然后单击下一行中 3 个按钮中的任意一个，然后单击这些行中的任意一个按钮，然后单击最后两行。

所有单击的按钮都应保持突出显示。

我怎样才能在顺风CSS中实现这一点。

我的研究

我已经搜索并找到了focused状态，但是一旦我单击第二行中的任何按钮，突出显示的内容就会消失在前一行中选择的按钮中。

我的代码

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-6">
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login21</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login22</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login23</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login31</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login32</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login33</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login41</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login42</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login43</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login51</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login52</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login53</button>
  </div>
</div>

《顺风》播放链接

是否可以使用 tailwindCSS 或仅使用 css ？

Answer 1

我通过输入[type=radio]修复它

请参阅 Tailwind 播放中的 HTML 和 CSS：https ://play.tai​​lwindcss.com/ALXtlFabvI