Summarize this article with:
Accordions solve a real problem: too much content, not enough space.
These collapsible panels let users reveal information on demand without overwhelming the interface. And with Tailwind CSS, you can build them using utility classes directly in your markup.
This collection of Tailwind accordion examples covers everything from basic toggle components to advanced patterns with Alpine.js, React, and Vue.
You’ll find code snippets for different styles, behaviors, animations, and accessibility requirements.
Each example is ready to copy into your project and customize.
What is a Tailwind Accordion
A Tailwind accordion is a collapsible content component built with Tailwind CSS utility classes.
It lets users expand and collapse stacked panels to reveal hidden content on click.
The accordion UI pattern works well for FAQs, product details, settings panels, and any interface where you need to organize large amounts of information into digestible sections.
Unlike CSS accordions that rely on custom stylesheets, Tailwind accordions use utility-first classes directly in your HTML markup.
This approach gives you full control over styling without writing separate CSS files.
How Does a Tailwind Accordion Work
The accordion relies on toggling visibility classes like hidden and block through JavaScript or Alpine.js.
When a user clicks the accordion header, the script switches these classes on the content panel, creating the expand collapse animation.
What Are the Core Parts of a Tailwind Accordion
Every accordion component has four main parts that work together.
Header Section
The clickable trigger element containing the title and toggle icon.
Usually a button or div with cursor-pointer class.
Content Panel
The collapsible area that shows or hides based on accordion state.
Contains the actual information users want to access.
Toggle Icon
Visual indicator showing open or closed state.
Commonly a chevron, plus/minus, or SVG arrow that rotates on toggle.
Container Wrapper
Parent element that groups all accordion items together.
Handles shared styling like borders, shadows, and spacing between items.
Tailwind Accordion Examples
Tailwind Accordion component Example
FAQ Accordion Section Without Using Any Javascript
Tailwind Pure CSS Accordion By stripedpurple
Accordion – Radix
Tailwind CSS Accordion – Flowbite
Tailwind CSS Accordion Example – CodePel
Horizontal Accordion
Accordion section by Lyra
Simple Colorful Accordion
FAQ Component with Details Summary Open Animation By surjithctly
Tailwind CSS React Accordion – Horizon UI
Tailwind CSS Accordion
Tailwind CSS Accordion – Preline
Accordion by Piet Vriend
Smooth Accordion with TailwindCSS & Alpine.js
Tailwind CSS Simple collapse/accordion with alpine.js By Anonymous
Lo-fi Tailwind CSS Accordion Menu
Tailwind CSS Accordions Components
Tailwind CSS: Accordions (collapsible content)
Tailwind CSS Simple Accordion By Shrihari
Tailwind CSS Simple Accordion (FAQ) Examples
A collapsible accordion
Tailwind CSS Accordion By sohanemon
How to Build a Basic Tailwind Accordion
Building an accordion with Tailwind CSS requires three things: proper HTML structure, the right utility classes, and a toggle mechanism.
You can use vanilla JavaScript, Alpine.js, React, or Vue to handle the state changes.
What HTML Structure Does a Tailwind Accordion Need
The markup follows a simple pattern: a wrapper div containing accordion items, each with a header button and content div.
“ <div class="w-full max-w-lg mx-auto"> <div class="border-b border-gray-200"> <button class="flex justify-between w-full py-4 text-left"> <span>Accordion Header</span> <svg class="w-5 h-5 transition-transform" ...></svg> </button> <div class="hidden pb-4"> <p>Accordion content goes here.</p> </div> </div> </div> `
Which Tailwind Classes Control Accordion Visibility
The hidden class sets display: none to collapse content.
Switching to block reveals the panel.
Add transition-all and duration-300 for smooth panel transitions.
How to Add Open and Close States
Alpine.js makes this straightforward with x-show and @click directives.
` <div x-data="{ open: false }"> <button @click="open = !open" class="flex justify-between w-full py-4"> <span>Click to Toggle</span> <svg :class="{ 'rotate-180': open }" class="w-5 h-5 transition-transform">...</svg> </button> <div x-show="open" x-collapse> <p class="pb-4">Content revealed on click.</p> </div> </div> `
The x-collapse directive from Alpine.js handles the height animation automatically.
Tailwind Accordion Examples by Style
Tailwind’s utility classes let you create dozens of accordion variations without custom CSS.
Here are the most common styling patterns you can apply to your interactive elements.
How to Create a Bordered Accordion
Add border, border-gray-200, and divide-y classes to the container.
` <div class="border border-gray-200 divide-y divide-gray-200 rounded-lg"> <!-- accordion items --> </div> `
Each item automatically gets a bottom border from the divide utility.
How to Build a Shadow Accordion
Use shadow-md or shadow-lg on the wrapper for depth.
` <div class="bg-white shadow-lg rounded-xl overflow-hidden"> <!-- accordion items --> </div> `
The overflow-hidden keeps rounded corners clean when items expand.
How to Make a Rounded Accordion
Apply rounded-lg or rounded-xl to the container.
For individual items, use first:rounded-t-lg and last:rounded-b-lg to round only the top and bottom items.
How to Create a Flush Accordion Without Borders
Strip all borders and shadows for a minimalist design.
` <div class="divide-y divide-gray-100"> <div class="py-4"> <button class="flex justify-between w-full text-left hover:text-blue-600"> <span>Minimal Header</span> </button> </div> </div> `
This style works well inside cards or when the accordion sits on a colored background.
Tailwind Accordion Examples by Behavior
Accordion behavior determines how panels interact with each other when users click through them.
How to Build a Single-Open Accordion
Only one panel stays open at a time; clicking another closes the current one.
Track the active index in state and compare it against each item’s index.
` <div x-data="{ active: null }"> <template x-for="(item, index) in items"> <div> <button @click="active = active === index ? null : index"> <span x-text="item.title"></span> </button> <div x-show="active === index" x-collapse> <p x-text="item.content"></p> </div> </div> </template> </div> `
How to Create a Multi-Open Accordion
Each panel operates independently, letting users expand multiple sections simultaneously.
Give each item its own boolean state instead of a shared index.
` <div x-data="{ items: [{ open: false }, { open: false }, { open: false }] }"> <template x-for="(item, index) in items"> <div> <button @click="items[index].open = !items[index].open">Toggle</button> <div x-show="item.open" x-collapse>Content here</div> </div> </template> </div> `
How to Make an Always-Open Accordion Section
Set the initial state to true for sections that should load expanded.
Useful for showing the most important information by default.
Tailwind Accordion Examples with Icons
Icons provide visual feedback about accordion state and improve user experience.
How to Add Chevron Icons to Accordion Headers
Place an SVG chevron inside the button, positioned with flex justify-between.
` <button class="flex justify-between items-center w-full py-4"> <span>Section Title</span> <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="M19 9l-7 7-7-7"></path> </svg> </button> `
How to Rotate Icons on Accordion Toggle
Apply transition-transform and duration-200 to the icon, then toggle rotate-180 based on state.
` <svg :class="{ 'rotate-180': open }" class="w-5 h-5 transition-transform duration-200"> <!-- chevron path --> </svg> `
How to Use Plus and Minus Icons for Accordions
Swap between two icons using conditional rendering or toggle the horizontal line’s visibility.
` <div class="relative w-5 h-5"> <span class="absolute inset-0 flex items-center justify-center"> <span class="w-4 h-0.5 bg-current"></span> <span :class="{ 'opacity-0': open }" class="absolute w-0.5 h-4 bg-current transition-opacity"></span> </span> </div> `
Tailwind Accordion Examples with Animation
Smooth transitions make accordions feel polished and professional, adding subtle micro-interactions to your interface.
How to Add Slide Transitions to Accordions
The Alpine.js x-collapse plugin handles height animations automatically.
For vanilla JS, animate max-height from 0 to the content's scrollHeight.
` // Vanilla JS approach const content = panel.querySelector('.accordion-content'); content.style.maxHeight = content.scrollHeight + 'px'; // On close: content.style.maxHeight = '0'; `
How to Create Fade Effects on Accordion Content
Combine opacity transitions with height animations for smoother reveals.
` <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-collapse > <p>Fading content</p> </div> `
How to Animate Accordion Icons Smoothly
Use transition-transform duration-300 ease-in-out on the icon element.
The rotate-180 class creates a flip effect when toggled.
Tailwind Accordion Examples with Frameworks
Different JavaScript frameworks handle accordion state in their own ways.
How to Build a Tailwind Accordion with Alpine.js
Alpine.js pairs perfectly with Tailwind since both work directly in HTML markup.
` <div x-data="{ open: false }" class="border rounded-lg"> <button @click="open = !open" class="flex justify-between w-full p-4 text-left"> <span>Alpine Accordion</span> <svg :class="{ 'rotate-180': open }" class="w-5 h-5 transition-transform">...</svg> </button> <div x-show="open" x-collapse class="px-4 pb-4"> <p>Panel content managed by Alpine.js state.</p> </div> </div> `
How to Create a Tailwind Accordion with React
Use useState to track which panel is open, then conditionally render content.
Learn how to use Tailwind CSS in React if you haven’t set up your project yet.
` const [activeIndex, setActiveIndex] = useState(null);
return ( <div className=”divide-y”> {items.map((item, index) => ( <div key={index}> <button onClick={() => setActiveIndex(activeIndex === index ? null : index)} className=”flex justify-between w-full py-4″ > {item.title} </button> {activeIndex === index && <div className=”pb-4″>{item.content}</div>} </div> ))} </div> ); `
How to Make a Tailwind Accordion with Vue
Vue’s v-show directive combined with transition components handles the expand collapse behavior.
` <template> <div v-for="(item, index) in items" :key="index"> <button @click="toggle(index)">{{ item.title }}</button> <transition name="slide"> <div v-show="activeIndex === index">{{ item.content }}</div> </transition> </div> </template> `
How to Build a Tailwind Accordion with Vanilla JavaScript
Query all accordion buttons, add click listeners, and toggle classes on sibling content elements.
` document.querySelectorAll('.accordion-btn').forEach(button => { button.addEventListener('click', () => { const content = button.nextElementSibling; content.classList.toggle('hidden'); button.querySelector('svg').classList.toggle('rotate-180'); }); }); `
Tailwind Accordion Examples for Common Use Cases
Different contexts call for different accordion configurations.
How to Create an FAQ Accordion
FAQ accordions use question-based headers with longer answer content, perfect for support pages and landing pages.
` <div class="max-w-2xl mx-auto divide-y"> <div x-data="{ open: false }" class="py-4"> <button @click="open = !open" class="flex justify-between w-full text-left font-medium"> <span>What is your return policy?</span> <svg :class="{ 'rotate-180': open }" class="w-5 h-5">...</svg> </button> <div x-show="open" x-collapse class="pt-4 text-gray-600"> <p>You can return items within 30 days of purchase...</p> </div> </div> </div> `
How to Build a Sidebar Navigation Accordion
Nested accordions work well for multi-level navigation menus in dashboards and admin panels.
Combine with Tailwind sidebar patterns for complete layouts.
How to Make a Product Details Accordion
Group specifications, descriptions, reviews, and shipping info into separate collapsible sections.
Single-open behavior keeps the interface clean on mobile.
How to Create a Settings Panel Accordion
Organize grouped options into expandable categories.
Works well alongside Tailwind forms for preference controls.
Accessibility Requirements for Tailwind Accordions
Proper web accessibility ensures all users can interact with your accordion components.
What ARIA Attributes Does an Accordion Need
Add ARIA attributes to communicate state to screen readers:
- aria-expanded=”true/false”
on the button
- aria-controls=”panel-id”
linking button to content
- aria-labelledby=”button-id”
on the panel
- id
attributes connecting both elements
` <button id="accordion-btn-1" aria-expanded="false" aria-controls="accordion-panel-1" > Section Title </button> <div id="accordion-panel-1" aria-labelledby="accordion-btn-1" role="region" > Panel content </div> `
How to Add Keyboard Navigation to Accordions
Support Enter and Space keys to toggle panels.
Arrow keys should move focus between accordion headers when implemented as a group.
What Role Attributes Should Accordions Have
Use role=”button” if the trigger isn't a native button element.
Add role=”region” to content panels for landmark navigation.
Common Tailwind Accordion Problems and Fixes
These issues come up frequently when building accordion components.
Why Does My Accordion Content Jump When Opening
Content jumps happen when height isn’t animated properly.
Use Alpine’s x-collapse plugin or animate max-height instead of toggling display.
How to Fix Accordion Content Overflow Issues
Add overflow-hidden to the content wrapper to prevent text from spilling outside during transitions.
For scrollable content inside panels, use overflow-y-auto with a fixed max-height.
Why Does My Accordion Icon Not Rotate
Check that transition-transform is on the icon element, not the parent.
Verify the state variable actually changes by logging it to the console.
FAQ on Tailwind Accordion Examples
How Do I Create an Accordion in Tailwind CSS?
Build a container with stacked div elements, each containing a button header and collapsible content panel.
Use hidden and block classes to toggle visibility. Alpine.js or vanilla JavaScript handles the state changes on click.
Does Tailwind Have a Built-in Accordion Component?
No. Tailwind CSS is a utility framework, not a component library.
You build accordions by combining utility classes with JavaScript. Headless UI from Tailwind Labs offers pre-built accessible disclosure components if you prefer ready-made solutions.
What JavaScript Library Works Best with Tailwind Accordions?
Alpine.js integrates naturally since both work in HTML markup.
The x-show, x-collapse, and @click directives handle toggle behavior with minimal code. React, Vue, and vanilla JS work equally well.
How Do I Animate a Tailwind Accordion?
Add transition-all and duration-300 classes to the content panel.
For height animations, use Alpine’s x-collapse plugin or animate max-height with JavaScript. Opacity transitions create smooth fade effects.
Can I Build a Tailwind Accordion Without JavaScript?
Yes, using the HTML details and summary elements.
These provide native expand collapse behavior without scripts. Style them with Tailwind utilities like any other element. Animation options are limited though.
How Do I Make Only One Accordion Panel Open at a Time?
Track the active panel index in state instead of individual booleans.
When clicking a header, compare its index to the active value. Set active to null if clicking the same panel, otherwise update to the new index.
How Do I Add Icons to a Tailwind Accordion?
Place an SVG icon inside the header button using flex justify-between items-center for positioning.
Add transition-transform to the icon and toggle rotate-180 based on open state for rotation effects.
Are Tailwind Accordions Accessible?
They can be with proper implementation.
Add aria-expanded, aria-controls, and aria-labelledby attributes. Support keyboard navigation with Enter and Space keys. Use semantic button elements for headers.
What Is the Difference Between Tailwind and Bootstrap Accordions?
Bootstrap accordion components come pre-styled with built-in JavaScript.
Tailwind requires you to build from scratch using utilities and your own scripts. More work upfront, but complete control over styling and behavior.
How Do I Style Accordion Headers on Hover?
Apply hover utilities directly to the button element.
Use hover:bg-gray-100 for background changes, hover:text-blue-600 for color shifts. Add transition-colors for smooth state changes between default and hover.
Conclusion
These Tailwind accordion examples give you a solid foundation for building collapsible content components in any project.
You now have code patterns for different styling approaches, toggle behaviors, and smooth accordion animations.
The framework integrations with Alpine.js, React, and Vue let you pick whatever fits your stack.
Accessibility matters. Add those ARIA attributes and keyboard controls to make your accordion component usable for everyone.
Start with a basic expand collapse pattern, then layer in features as needed.
Combine these patterns with other Tailwind components like Tailwind tabs, modals, and dropdowns to build complete, interactive interfaces.
Copy the code, customize the styling, ship it.
