Using x-show to Display Tabs

Showing different content by Tabs is a common layout for modern Web design. This can be done only by Alpine and TailwindCSS.

Version

Alpine 3.9
TailwindCSS 3.0

x-show

show000

Showing different content according to the Tab clicked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ activeTab: 0 }">
    <div>
      <button
        @click="activeTab = 0"
        class="rounded-lg bg-gray-200 px-3 py-1 text-gray-800"
      >
        Tab 1
      </button>
      <button
        @click="activeTab = 1"
        class="rounded-lg bg-gray-200 px-3 py-1 text-gray-800"
      >
        Tab 2
      </button>
      <button
        @click="activeTab = 2"
        class="rounded-lg bg-gray-200 px-3 py-1 text-gray-800"
      >
        Tab 3
      </button>
    </div>
    <div>
      <div x-show="activeTab === 0">Content 1</div>
      <div x-show="activeTab === 1">Content 2</div>
      <div x-show="activeTab === 2">Content 3</div>
    </div>
  </body>
</html>

Line 10

<body x-data="{ activeTab: 0 }">

activeTab : define variable for the current active tab

Line 12

<button
  @click="activeTab = 0"
  class="rounded-lg bg-gray-200 px-3 py-1 text-gray-800"
>
  Tab 1
</button>

@click : set activeTab according to the current tab

Line 32

<div x-show="activeTab === 0">Content 1</div>

x-show : show <div> according to activeTab

Conclusion

x-show is a powerful directive when x-show is used with x-data

Reference

Alpine, x-show