Tailwind 中切换 UI 状态的正确方法是什么？答案

【问题标题】：What is the proper way in Tailwind to toggle a UI state?Tailwind 中切换 UI 状态的正确方法是什么？
【发布时间】：2021-06-22 17:17:40
【问题描述】：

我是一个完整的 Tailwind css 新手，正在一个小项目中使用它。

切换选项卡的 UI 状态的惯用方法是什么？以下是直接取自 Tailwind 网站的几个标签：

      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
        <a class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
          Tab 1
        </a>

        <a class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
          Tab 2
        </a>

        <a class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
          Tab 3
        </a>
      </nav>

如您所见，Tab 3 是“选中”状态。如果我想将选择更改为选项卡 1。我必须交换一堆实用程序类（border-indigo-500 到 border-transparent 等）。

使用 vanilla CSS，您可以定义一个名为 .selected 的 css 类，它将覆盖普通选项卡的 css 并在 html 元素上切换该类，但我认为这不是 tailwind 推荐的惯用方式。

对不起，如果这是一个超级新手问题。谢谢。

【问题讨论】：

标签： tailwind-css

【解决方案1】：

为此，您可以维护三个变量。包含选定选项卡值的一个：

let selectedTab = "tab1"

以及活动和非活动选项卡的其他类名。像这样的：

const active = "border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
const nonActive = "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"

根据单击，您将所选选项卡的值更改为其各自的选项卡值，并根据它更改 HTML 的 className。

您的 HTML 将如下所示

<nav class="-mb-px flex space-x-8" aria-label="Tabs">
  <a class={selectedTab === "tab1" ? active : nonActive}> Tab 1 </a>

  <a class={selectedTab === "tab2" ? active : nonActive}> Tab 2 </a>

  <a class={selectedTab === "tab3" ? active : nonActive}> Tab 3 </a>
</nav>

【讨论】：