Tailwind Tabs
Tailwind tabs component with Alpine.js
Details About Tailwind Tabs
Key points:
- Responsive Design
- Tailwind CSS v3.0+
- Copy & Paste
- JavaScript Plugin
- Open Source
Contents
Code Example
<body class="bg-gray-50">
<div class="flex justify-center items-center min-h-screen">
<div x-data="{ tab: 'home' }" class="w-full max-w-lg p-4 bg-white shadow rounded">
<div class="flex space-x-4">
<button @click="tab = 'home'" class="px-4 py-2 text-sm font-medium border-b-2" :class="{'border-black text-black': tab === 'home', 'border-transparent text-gray-600': tab !== 'home'}">
Home
</button>
<button @click="tab = 'profile'" class="px-4 py-2 text-sm font-medium border-b-2" :class="{'border-black text-black': tab === 'profile', 'border-transparent text-gray-600': tab !== 'profile'}">
Profile
</button>
<button @click="tab = 'settings'" class="px-4 py-2 text-sm font-medium border-b-2" :class="{'border-black text-black': tab === 'settings', 'border-transparent text-gray-600': tab !== 'settings'}">
Settings
</button>
</div>
<div class="mt-4">
<div x-show="tab === 'home'" class="p-4 bg-gray-50 rounded">
<h2 class="text-lg font-semibold">Home Content</h2>
<p class="mt-2 text-gray-700">This is the home tab content.</p>
</div>
<div x-show="tab === 'profile'" class="p-4 bg-gray-50 rounded">
<h2 class="text-lg font-semibold">Profile Content</h2>
<p class="mt-2 text-gray-700">This is the profile tab content.</p>
</div>
<div x-show="tab === 'settings'" class="p-4 bg-gray-50 rounded">
<h2 class="text-lg font-semibold">Settings Content</h2>
<p class="mt-2 text-gray-700">This is the settings tab content.</p>
</div>
</div>
</div>
</div>FAQ
Why aren't Alpine.js functions working?
Make sure you've correctly included Alpine.js and Tailwind CSS in your project. Check your browser's console for any error messages and verify that your scripts are loaded in the correct order.
How do I install Alpine.js into my project?
To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.