Tabs - Tailwind CSS Builder Documentation

Overview

The Tabs element displays content in switchable panels with tab navigation. This is ideal for organizing related information into logical groups without requiring users to navigate away from the page.

Tabs are powered by Alpine.js for lightweight interactivity — no custom JavaScript is required. The component uses the x-data="{ activeTab: 0 }" attribute to track which tab panel is currently visible.

The Tabs element does not have default styling classes, giving you full control over the appearance. Add tab-panel children to define the content panels, and the corresponding tab buttons are generated based on each panel's label.

Alpine.js Auto-Loading

Alpine.js is automatically loaded when interactive elements like Tabs are used on the page. You do not need to add any scripts manually.

Settings

Configure the Tabs element using these Inspector options:

Setting	Description	Default
Active Tab	The index of the initially active tab (0-based). Set to 0 for the first tab, 1 for the second, etc.	0 (first tab)
Alpine State (x-data)	The x-data attribute tracks which tab index is currently active. The activeTab value corresponds to the panel index.	{ activeTab: 0 }
Tab Position	Tabs can be styled to appear above, below, or beside the content panels. Controlled via layout classes.	Top
Container Classes	Styling classes for the tabs wrapper container.	(none)

Child Elements: tab-panel

Each tab-panel represents a single tab's content with the following structure:

Label – The text displayed in the corresponding tab button
Content – Any elements you want to display when this tab is active

Panel visibility is controlled by Alpine.js based on the activeTab index. When a tab button is clicked, the activeTab value updates and the corresponding panel becomes visible while others are hidden.

Each panel has a corresponding tab button that is auto-generated based on the panel's label setting. You can customize tab button styling using classes on the tab navigation container.

Creating Tabbed Content

Add a Tabs element to the canvas from the Interactive Elements panel
Drag tab-panel children inside the tabs container
Set each panel's label in the Inspector — this becomes the tab button text
Add content to each panel — text, images, or any other elements
Click tabs to switch between panels and verify content displays correctly
Style tab buttons and panels independently using the Inspector

Examples

Product Features Tabs

Display product features organized into logical categories using tabs.

<div x-data="{ activeTab: 0 }">
  <!-- Tab Buttons -->
  <div class="flex border-b border-gray-200">
    <button @click="activeTab = 0"
            :class="{ 'border-blue-500 text-blue-600': activeTab === 0, 'border-transparent text-gray-500 hover:text-gray-700': activeTab !== 0 }"
            class="px-4 py-2 border-b-2 font-medium">
      Features
    </button>
    <button @click="activeTab = 1"
            :class="{ 'border-blue-500 text-blue-600': activeTab === 1, 'border-transparent text-gray-500 hover:text-gray-700': activeTab !== 1 }"
            class="px-4 py-2 border-b-2 font-medium">
      Specifications
    </button>
    <button @click="activeTab = 2"
            :class="{ 'border-blue-500 text-blue-600': activeTab === 2, 'border-transparent text-gray-500 hover:text-gray-700': activeTab !== 2 }"
            class="px-4 py-2 border-b-2 font-medium">
      Reviews
    </button>
  </div>

  <!-- Tab Panels -->
  <div class="p-4">
    <div x-show="activeTab === 0">
      <h3 class="font-semibold text-lg mb-2">Key Features</h3>
      <ul class="list-disc list-inside space-y-2 text-gray-600">
        <li>Responsive design for all devices</li>
        <li>Built-in dark mode support</li>
        <li>Drag and drop page builder</li>
      </ul>
    </div>
    <div x-show="activeTab === 1">
      <h3 class="font-semibold text-lg mb-2">Technical Specifications</h3>
      <table class="w-full text-sm">
        <tr class="border-b"><td class="py-2">Framework</td><td>React 18</td></tr>
        <tr class="border-b"><td class="py-2">CSS</td><td>Tailwind CSS</td></tr>
        <tr><td class="py-2">State</td><td>Zustand</td></tr>
      </table>
    </div>
    <div x-show="activeTab === 2">
      <h3 class="font-semibold text-lg mb-2">Customer Reviews</h3>
      <p class="text-gray-600">Rated 4.8 out of 5 stars based on 124 reviews.</p>
    </div>
  </div>
</div>

Tabs with Icons in Labels

Add icons to tab buttons for better visual identification.

<div x-data="{ activeTab: 0 }">
  <div class="flex bg-gray-100 rounded-lg p-1">
    <button @click="activeTab = 0"
            :class="{ 'bg-white shadow': activeTab === 0 }"
            class="flex items-center gap-2 px-4 py-2 rounded-md transition-all">
      <i class="fas fa-home"></i>
      <span>Dashboard</span>
    </button>
    <button @click="activeTab = 1"
            :class="{ 'bg-white shadow': activeTab === 1 }"
            class="flex items-center gap-2 px-4 py-2 rounded-md transition-all">
      <i class="fas fa-cog"></i>
      <span>Settings</span>
    </button>
    <button @click="activeTab = 2"
            :class="{ 'bg-white shadow': activeTab === 2 }"
            class="flex items-center gap-2 px-4 py-2 rounded-md transition-all">
      <i class="fas fa-user"></i>
      <span>Profile</span>
    </button>
  </div>

  <div class="mt-4">
    <div x-show="activeTab === 0" class="p-4 bg-white rounded-lg shadow">
      Dashboard content goes here...
    </div>
    <div x-show="activeTab === 1" class="p-4 bg-white rounded-lg shadow">
      Settings content goes here...
    </div>
    <div x-show="activeTab === 2" class="p-4 bg-white rounded-lg shadow">
      Profile content goes here...
    </div>
  </div>
</div>

Vertical Tabs Layout

Position tabs vertically alongside content for sidebar-style navigation.

<div x-data="{ activeTab: 0 }" class="flex gap-4">
  <!-- Vertical Tab Buttons -->
  <div class="flex flex-col w-48 border-r border-gray-200">
    <button @click="activeTab = 0"
            :class="{ 'bg-blue-50 text-blue-600 border-l-2 border-blue-600': activeTab === 0 }"
            class="text-left px-4 py-3 hover:bg-gray-50">
      Overview
    </button>
    <button @click="activeTab = 1"
            :class="{ 'bg-blue-50 text-blue-600 border-l-2 border-blue-600': activeTab === 1 }"
            class="text-left px-4 py-3 hover:bg-gray-50">
      Installation
    </button>
    <button @click="activeTab = 2"
            :class="{ 'bg-blue-50 text-blue-600 border-l-2 border-blue-600': activeTab === 2 }"
            class="text-left px-4 py-3 hover:bg-gray-50">
      Configuration
    </button>
  </div>

  <!-- Content Panels -->
  <div class="flex-1 p-4">
    <div x-show="activeTab === 0">
      <h3 class="text-xl font-bold mb-4">Overview</h3>
      <p class="text-gray-600">Welcome to the documentation. Get started with our quick overview.</p>
    </div>
    <div x-show="activeTab === 1">
      <h3 class="text-xl font-bold mb-4">Installation</h3>
      <p class="text-gray-600">Follow these steps to install the theme on your WordPress site.</p>
    </div>
    <div x-show="activeTab === 2">
      <h3 class="text-xl font-bold mb-4">Configuration</h3>
      <p class="text-gray-600">Configure the builder settings to match your preferences.</p>
    </div>
  </div>
</div>

Quick Tip

Use x-transition directives on tab panels for smooth fade or slide animations when switching between tabs. This creates a polished user experience.

Next Steps

Accordion – Learn about expandable content panels
Form – Embed forms from popular WordPress form plugins
Inspector – Style controls for customizing elements