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

【问题标题】：How to select multiple button options on same html page using tailwind css?如何使用tailwind css在同一个html页面上选择多个按钮选项？
【发布时间】：2020-10-14 15:48:52
【问题描述】：

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

  <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>

【问题讨论】：

请分享一个工作的codepen/jsfiddle

标签： javascript html css tailwind-css

【解决方案1】：

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

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

检查下面的 sn-p 以查看它的实际效果：

<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>

【讨论】：