Summarize this article with:
Tabs keep interfaces clean. They organize content without overwhelming users.
These Tailwind tabs examples show you how to build tab components from scratch using utility classes, with complete code snippets you can copy directly into your projects.
You’ll learn the core HTML structure, JavaScript for state management, and styling variations from underlined to pill tabs.
Each example covers responsive behavior, accessibility with ARIA attributes, and smooth transition effects.
Whether you’re building a settings page, product details section, or Tailwind dashboard, these patterns give you the foundation to create tab navigation that works across devices and meets web accessibility standards.
What is a Tailwind Tab
A Tailwind tab is a user interface component that organizes content into switchable panels.
Users click tab buttons to reveal different sections without leaving the page.
Built entirely with Tailwind CSS utility classes, these components require no custom stylesheets.
The tab pattern works well for settings pages, product details, dashboards, and any layout where content grouping improves usability.
Unlike Bootstrap tabs that come pre-styled, Tailwind tabs give you complete control over every visual detail.
Tailwind Tabs Examples
Tailwind CSS Tabs Collection
Tailwind CSS Tabs
Tailwind Tabs
Tailwind CSS Tabs – Flowbite
Tailwind Css Tabs By zoltanszogyenyi
React Tailwind CSS Tabs Examples
Tailwind CSS Tabs – Color Celection By Hammaadh Rasheedh
Tailwind Tab with jQuery toggle by Raj Parihar
Dialog With Tabs
Tailwind CSS Tabs – Material Tailwind
Tailwind Tab UI by jeevan
Tabs – Headless UI
Interactive Tabs
TailwindCSS Tabs with JS by Ilyosjon Kamoldinov
Argon Tabs With Icons
Tailwind Tabs from CodePen Pro
Tailwind CSS Material 3 Tabs
Tailwind CSS Tabs From Scratch
Alpine and Tailwind Tab Bar by Lars Klopstra
How Do Tailwind Tabs Work
Tailwind tabs combine HTML structure with utility classes and JavaScript for interactivity.
The tab buttons live in a container with flex or grid positioning.
Each button triggers a click event that shows its corresponding panel while hiding others.
Active state management happens through class toggling.
When a user clicks a tab button, JavaScript adds active classes (like bg-blue-500 or border-b-2) to the selected button and removes them from siblings.
The connected panel switches from hidden to block.
This state management can use vanilla JavaScript, Alpine.js, or React’s useState hook depending on your stack.
What Are the Main Components of a Tailwind Tab
Every tab implementation needs five structural elements working together.
Tab container wraps everything and controls the overall layout direction.
Tab list holds the clickable buttons, typically styled with flex and space-x-4.
Tab buttons receive user clicks and display the section labels.
Tab panels contain the actual content that shows or hides based on selection.
Active indicator provides visual feedback showing which tab is currently selected.
Here’s the basic structure:
- Outer wrapper with
w-fullfor full-width tabs - Button group using
flex border-b - Individual buttons with padding and hover states
- Panel wrapper containing all content sections
- Individual panels with conditional visibility
How to Create a Basic Tailwind Tab
Start with semantic HTML markup that separates buttons from content panels.
The button container uses flex for horizontal alignment.
Each panel gets a unique identifier that JavaScript references for toggling visibility.
“ <div class="w-full"> <div class="flex border-b border-gray-200"> <button class="px-4 py-2 text-blue-600 border-b-2 border-blue-600">Tab 1</button> <button class="px-4 py-2 text-gray-500 hover:text-gray-700">Tab 2</button> <button class="px-4 py-2 text-gray-500 hover:text-gray-700">Tab 3</button> </div> <div class="p-4"> <div id="panel-1">Content for first tab</div> <div id="panel-2" class="hidden">Content for second tab</div> <div id="panel-3" class="hidden">Content for third tab</div> </div> </div> `
What Classes Style the Tab Buttons
Button styling relies on padding, text color, border, and transition utilities.
Common classes: px-4 py-2 for spacing, text-gray-500 for inactive state, hover:text-gray-700 for interaction feedback.
Active buttons typically get text-blue-600 border-b-2 border-blue-600 or similar accent colors.
What Classes Style the Tab Panels
Panels use hidden and block for visibility control.
Add p-4 or p-6 for internal spacing.
Transition classes like transition-opacity duration-150 create smooth content switches when combined with opacity changes.
How to Make Tailwind Tabs Responsive
Tailwind’s responsive design breakpoints transform tab layouts across screen sizes.
The mobile-first approach starts with stacked vertical tabs, then switches to horizontal at larger breakpoints.
Use flex-col md:flex-row on the button container for this pattern.
Touch-friendly sizing matters on mobile.
Minimum tap targets of 44×44 pixels prevent accidental clicks.
Classes like min-h-[44px] and adequate padding ensure buttons meet accessibility standards.
For many tabs on small screens, consider scrollable tabs with overflow-x-auto and whitespace-nowrap.
This horizontal scroll pattern, similar to Tailwind navbar overflow handling, keeps all options accessible without stacking.
How to Add JavaScript to Tailwind Tabs
Tailwind handles styling only. You need JavaScript for the click handler and panel visibility toggle.
Choose between vanilla JS for zero dependencies, Alpine.js for declarative syntax, or React/Vue for component-based projects.
The core logic stays the same: listen for clicks, update button classes, show the matching panel, hide others.
How Does Alpine.js Handle Tab State
Alpine.js uses x-data to store the active tab index and x-show for conditional rendering.
The @click directive updates state without writing separate event listeners.
` <div x-data="{ activeTab: 1 }"> <div class="flex border-b"> <button @click="activeTab = 1" :class="activeTab === 1 ? 'border-b-2 border-blue-500' : ''">Tab 1</button> <button @click="activeTab = 2" :class="activeTab === 2 ? 'border-b-2 border-blue-500' : ''">Tab 2</button> </div> <div x-show="activeTab === 1">Panel 1 content</div> <div x-show="activeTab === 2">Panel 2 content</div> </div> `
How Does Vanilla JavaScript Handle Tab State
Pure JS uses querySelectorAll for button selection, addEventListener for clicks, and classList methods for class toggling.
More verbose than Alpine.js but works without any framework dependency.
` const tabs = document.querySelectorAll('[data-tab]'); const panels = document.querySelectorAll('[data-panel]');
tabs.forEach(tab => { tab.addEventListener(‘click’, () => { tabs.forEach(t => t.classList.remove(‘border-b-2’, ‘border-blue-500’)); panels.forEach(p => p.classList.add(‘hidden’)); tab.classList.add(‘border-b-2’, ‘border-blue-500’); document.querySelector([data-panel=”${tab.dataset.tab}”]).classList.remove('hidden'); }); }); `
What Are Different Tailwind Tab Styles
Tab styling varies based on design system needs. Underlined tabs suit minimal interfaces, pill tabs work for playful brands, bordered tabs fit dashboard layouts.
Each style uses different combinations of border, background, and rounded utilities.
How to Create Underlined Tabs
Use border-b-2 on active buttons with a matching border-blue-500 color.
The container needs border-b border-gray-200 as the baseline, similar to CSS tabs patterns.
` <button class="px-4 py-2 border-b-2 border-transparent hover:border-gray-300">Inactive</button> <button class="px-4 py-2 border-b-2 border-blue-500 text-blue-600">Active</button> `
How to Create Pill Tabs
Pill tabs use rounded-full with background color changes for active state.
Group them with bg-gray-100 p-1 rounded-full on the container for a segmented control look.
` <div class="inline-flex bg-gray-100 p-1 rounded-full"> <button class="px-4 py-2 rounded-full bg-white shadow text-gray-900">Active</button> <button class="px-4 py-2 rounded-full text-gray-500">Inactive</button> </div> `
How to Create Bordered Tabs
Card-style tabs connect visually to their panels using matching borders.
Active tab gets border border-b-0 rounded-t while the panel has border with negative margin overlap.
` <button class="px-4 py-2 border border-b-0 rounded-t-lg bg-white -mb-px">Active</button> <div class="border rounded-b-lg p-4">Panel content</div> `
How to Create Vertical Tabs
Switch the button container to flex-col and position panels alongside with flex on the wrapper.
Vertical layouts work well for Tailwind sidebar navigation patterns with many options.
` <div class="flex"> <div class="flex flex-col w-48 border-r"> <button class="px-4 py-2 text-left border-l-2 border-blue-500">Tab 1</button> <button class="px-4 py-2 text-left border-l-2 border-transparent">Tab 2</button> </div> <div class="flex-1 p-4">Panel content</div> </div> `
How to Add Icons to Tailwind Tabs
Icons improve scannability and add visual interest to tab buttons.
Use inline SVG or icon libraries like Heroicons for consistent sizing.
Position icons with flex items-center gap-2 on the button element.
` <button class="flex items-center gap-2 px-4 py-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> Home </button> `
Icon color inherits from text-* classes through currentColor.
Size icons at w-4 h-4 or w-5 h-5 relative to your text size.
How to Make Tailwind Tabs Accessible
ARIA attributes make tabs usable for screen readers and keyboard navigation.
The tab list needs role=”tablist”, buttons need role=”tab”, panels need role=”tabpanel”.
Required ARIA connections:
- aria-selected=”true”
on the active tab button
- aria-controls=”panel-id”
linking button to panel
- aria-labelledby=”tab-id”
on panels referencing their button
- tabindex=”0″
on active tab,tabindex=”-1″on inactive tabs
Keyboard support requires arrow key navigation between tabs and Enter/Space to activate.
Follow inclusive design principles by maintaining visible focus states with focus:ring-2 focus:ring-blue-500.
What Are Common Tailwind Tab Patterns
Production apps need patterns beyond basic tabs. Full-width distribution, overflow handling, and notification badges solve real layout challenges.
How to Create Full-Width Tabs
Use flex-1 on each button for equal distribution across the container width.
Add text-center for centered labels.
` <div class="flex w-full border-b"> <button class="flex-1 px-4 py-2 text-center">Tab 1</button> <button class="flex-1 px-4 py-2 text-center">Tab 2</button> <button class="flex-1 px-4 py-2 text-center">Tab 3</button> </div> `
How to Create Scrollable Tabs
Handle many tabs with overflow-x-auto and whitespace-nowrap on the container.
Add scrollbar-hide (requires plugin) or custom CSS to hide the scrollbar on touch devices.
` <div class="flex overflow-x-auto whitespace-nowrap border-b"> <button class="flex-shrink-0 px-4 py-2">Tab 1</button> <button class="flex-shrink-0 px-4 py-2">Tab 2</button> <!-- More tabs --> </div> `
How to Create Tabs with Badges
Position notification counters with relative on the button and absolute on the badge.
Badge styling: bg-red-500 text-white text-xs rounded-full px-1.5.
` <button class="relative px-4 py-2"> Messages <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-1.5">3</span> </button> `
How to Animate Tailwind Tab Transitions
Smooth transitions improve perceived quality. Apply CSS animation utilities to both buttons and panels.
Button transitions: transition-colors duration-150 for hover and active state changes.
Panel transitions require opacity or transform animations since hidden to block cannot animate directly.
` <!-- Fade transition with Alpine.js --> <div x-show="activeTab === 1" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" > Panel content </div> `
Keep durations under 200ms for snappy micro-interactions.
Longer animations feel sluggish on repeated tab switches.
What Problems Do Developers Face with Tailwind Tabs
Common issues and fixes:
- State persistence – Tab resets on page reload. Store active index in URL hash or localStorage.
- Deep linking – Users cannot share links to specific tabs. Parse window.location.hash
on load to set initial state.
- SEO considerations – Hidden panel content may not get indexed. Use visibility: hidden
instead ofdisplay: nonefor important content.
- Initial load flash – All panels briefly visible before JS runs. Add hidden
class in HTML, not just via JavaScript.
- Accessibility gaps – Missing ARIA attributes break screen reader experience. Test with VoiceOver or NVDA before shipping.
- Mobile tap targets – Buttons too small for fingers. Enforce minimum 44px height with padding.
For complex requirements like nested tabs or lazy-loaded content, consider Tailwind accordion as an alternative pattern or use Headless UI’s pre-built accessible tab component.
FAQ on Tailwind Tabs Examples
How do I create tabs in Tailwind CSS?
Build a flex container for tab buttons and separate div elements for panels. Use utility classes like border-b-2 for active states. Add JavaScript or Alpine.js to handle click events and toggle the hidden class on panels.
Do Tailwind tabs require JavaScript?
Yes. Tailwind CSS handles styling only. You need JavaScript for tab switching logic, whether vanilla JS with addEventListener, Alpine.js with x-show, or React's useState hook. The framework provides no built-in interactivity.
How do I make Tailwind tabs responsive?
Use flex-col md:flex-row to stack tabs vertically on mobile and horizontally on desktop. Add overflow-x-auto for scrollable tabs when space is limited. Apply media queries through Tailwind's breakpoint prefixes.
What is the best way to style active tabs?
Toggle classes dynamically with JavaScript. Common active styles include border-b-2 border-blue-500 for underlined tabs, bg-white shadow for pill tabs, or text-blue-600 font-medium for text emphasis.
How do I add icons to Tailwind tabs?
Place inline SVG or icon components inside button elements. Use flex items-center gap-2 on the button for proper alignment. Size icons with w-5 h-5 classes. Icons inherit text color through currentColor.
Are Tailwind tabs accessible by default?
No. You must add ARIA attributes manually. Include role=”tablist” on the container, role=”tab” on buttons, and role=”tabpanel” on content sections. Implement keyboard navigation with arrow keys.
Can I animate Tailwind tab transitions?
Yes. Apply transition-opacity duration-200 to panels and animate between opacity-0 and opacity-100. Alpine.js offers x-transition directives for declarative animations. Keep durations under 200ms for responsive feel.
How do I create vertical tabs in Tailwind?
Wrap everything in a flex container. Set the button group to flex-col with a fixed width. Use border-l-2 instead of border-b-2 for the active indicator. Position panels with flex-1.
What is the difference between Tailwind tabs and Bootstrap tabs?
Tailwind provides utility classes only, requiring custom JavaScript and structure. Bootstrap includes pre-built tab components with built-in JavaScript. Tailwind offers more design flexibility while Bootstrap provides faster implementation with less customization.
How do I persist tab state on page reload?
Store the active tab index in the URL hash or localStorage. On page load, read the stored value and set the initial active state. URL hash method also enables deep linking to specific tabs for sharing.
Conclusion
These Tailwind tabs examples give you the building blocks for any tab component your project needs.
You now have the HTML structure, click handler logic, and styling patterns for underlined, pill, bordered, and vertical tab layouts.
The Alpine.js and vanilla JavaScript implementations handle state management without heavy dependencies.
Pair tabs with other interactive elements like modals or dropdowns to build complete frontend interfaces.
Remember to add ARIA roles and keyboard navigation before shipping to production.
Start with a basic tab component, test across screen sizes, then add animations and badges as needed.
The utility-first approach means every design decision stays in your control.
