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.

<template>
  <div class="container mx-auto">
    <div class="lg:max-w-lg w-full">
      <div class="divide-y divide-gray-100">
        <details class="group" open>
          <summary
            class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-gray-900">
            Accordion item #1
            <div class="text-gray-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-gray-500">
            This is the first item's accordion body 1.
          </div>
        </details>
        <details class="group">
          <summary
            class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-gray-900">
            Accordion item #2
            <div class="text-gray-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-gray-500">
            This is the second item's accordion body 2.
          </div>
        </details>
        <details class="group">
          <summary
            class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-gray-900">
            Accordion item #3
            <div class="text-gray-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-gray-500">
            This is the third item's accordion body 3.
          </div>
        </details>
      </div>
    </div>
  </div>
</template>

2.Nuxt 3 Typescript with tailwind css accordion (FAQ) section using v-for loop to make shorthand code.

<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>