How to Create Accordion with TailwindCSS [No JS]

You can create an accordion component without using Javascript or frameworks of Javascript. HTML provides an accordion component by default that we can style using TailwindCSS.

Creating Basic Accordion with TailwindCSS

First, let’s add a simple FAQ accordion with details and summary tags. This will be a simple but boring accordion. So, with TailwindCSS, adding some basic styles will make the accordion look good on the page. Here is a simple accordion styled with TailwindCSS and a working demo on the tailwind playground.


Adding More Content in Accordion.

Same as the above, details and summary tags can be used to add more content. Below, you can check the accordion with 3 FAQs.

The output of the above code will be an accordion with 3 different FAQs. Here is the working demo of the above code and the output snapshot is attached below.

simple accordion with tailwindcss


Customizing the Default Icon of Accordion

You can change the default icon of the accordion with your custom styles. First, you need to hide the default market, second, you have to provide your own icon for open and closed states. In the tailwind input file, add the following code to change the default icon. Here is the working code snippet with a custom marker.

The output

after changing the default icon will look like the below screenshot.


accordion with custom icons in tailwindcss


You can design a beautiful accordion without using JavaScript or any other framework. TailwindCSS styles are very useful to design a nice-looking accordion component using the default HTML accordion. You can learn more about details tags in HTML.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles