如何使用 tailwind css 在同一个 html 页面上 select 多个按钮选项？

Question

这就是我现在在 HTML 页面中环绕 row/col 的按钮。我打算让用户能够同时 select 多个按钮

  <div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Hoppy
      </div>
    </button>
  </div>

  <div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Fruity/Citrus
      </div>
    </button>
  </div>

  <div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Roasty/Coffee
      </div>
    </button>
  </div>
  
    <div class = "p-5">
        <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
        <div class = "text-left text-black font-bold">
            Chocolate
        </div>
        </button>
    </div>

<div class = "p-5">
    <button class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40">
      <div class = "text-left text-black font-bold">
        Not sure
      </div>
    </button>
</div>

</div>

Answer 1

我冒昧地清理了你的代码，但要回答你的问题，你需要 javascript 才能实现你的需要。

我正在使用 AlpineJS，它使用类似 Vue 的语法，但基本上您需要添加一个 class，以显示用户点击的每个按钮的“已选择”状态。

检查下面的代码片段以查看它的实际效果：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>


<div class="flex justify-center">
  <div class="p-5" x-data="{ active: false }">
    <button :class="{ 'bg-red-300': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
      Hoppy
    </button>
  </div>
  <div class="p-5" x-data="{ active: false }">
    <button :class="{ 'bg-red-300': active }" class="hover:bg-green-200 border border-gray-700 py-2 px-4 rounded w-40 text-left text-black font-bold" @click="active = !active">
      Chocolate
    </button>
  </div>
</div>

如何使用 tailwind css 在同一个 html 页面上 select 多个按钮选项？

How to select multiple button options on same html page using tailwind css?

html

javascript

css

tailwind-css