DEV Community

Cover image for Create Accordion in NuxtJS with Tailwind CSS
saim
saim

Posted on • Originally published at webvees.com

1

Create Accordion in NuxtJS with Tailwind CSS

In this tutorial, we will create accordion (FAQ) in Nuxt 3 with tailwind css. Before we begin, you need to install and configure tailwind css in Nuxt 3.


Install Tailwind CSS in Nuxt 3 with NuxtTailwind Module

  1. Nuxt 3 with tailwind css basic accordion (FAQ) section. ```vue






class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-gray-900">
Accordion item #1

stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">





This is the first item's accordion body 1.



class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-gray-900">
Accordion item #2

stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">





This is the second item's accordion body 2.



class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-gray-900">
Accordion item #3

stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">





This is the third item's accordion body 3.





![nuxt 3 with tailwind css accordion](https://webvees.com/wp-content/uploads/2024/05/YORcUGxSUte6RUy3Q1eaIc9BwYY8QSNEW10LCadO.png)
2.Nuxt 3 Typescript with tailwind css accordion (FAQ) section using v-for loop to make shorthand code.
```vue


<script setup lang="ts">
const accordionItems: { title: string; content: string }[] = [
  {
    title: "Accordion item 01",
    content: "This is the first item accordion body 1",
  },
  {
    title: "Accordion item 02",
    content: "This is the second item accordion body 2",
  },
  {
    title: "Accordion item 03",
    content: "This is the third item accordion body 3",
  },
];
</script>
<template>
  <div class="container mx-auto">
    <div class="w-full lg:max-w-lg">
      <div class="divide-y divide-gray-100">
        <details v-for="(item, index) in accordionItems" :key="index" class="group">
          <summary
            class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900">
            {{ item.title }}
            <div class="text-secondary-500">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
              </svg>
            </div>
          </summary>
          <div class="pb-4 text-secondary-500">{{ item.content }}</div>
        </details>
      </div>
    </div>
  </div>
</template>


Enter fullscreen mode Exit fullscreen mode

nuxt 3 tailwind accordion

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay