Fixing Dropdown Issues in Tailwind CSS with Flowbite

Dropdowns are a common UI element, but setting them up correctly with Tailwind CSS and Flowbite requires attention to detail. If your dropdown isn't working as expected, follow these steps to debug and fix the issue.

Common Issue: Missing Required JavaScript

Flowbite dropdowns rely on JavaScript for interactivity. If you've only included the Tailwind CSS CDN, the dropdown won't function correctly.

Solution: Include the Required Flowbite Scripts

Include the Flowbite CSS in the <head> section:

<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />
</head>

Add the Flowbite JavaScript at the end of the <body> section:

<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

Dropdown Example:

<body>
  <button
    id="dropdownDefault"
    data-dropdown-toggle="dropdown"
    class="inline-flex items-center rounded-lg bg-blue-700 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300"
  >
    Dropdown button
    <svg
      class="ml-2 h-4 w-4"
      aria-hidden="true"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M19 9l-7 7-7-7"
      ></path>
    </svg>
  </button>
  <!-- Dropdown menu -->
  <div
    id="dropdown"
    class="z-10 hidden w-44 divide-y divide-gray-100 rounded bg-white shadow dark:bg-gray-700"
  >
    <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
      <li>
        <a
          href="#"
          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
          >Dashboard</a
        >
      </li>
      <li>
        <a
          href="#"
          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
          >Settings</a
        >
      </li>
      <li>
        <a
          href="#"
          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
          >Earnings</a
        >
      </li>
      <li>
        <a
          href="#"
          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
          >Sign out</a
        >
      </li>
    </ul>
  </div>
</body>

If you're using React or prefer not to include Flowbite, you can create a dropdown using Tailwind's utility classes and React's state management:

import { useState } from 'react'

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button
        className="rounded-lg bg-blue-700 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300"
        onClick={() => setIsOpen(!isOpen)}
      >
        Dropdown
      </button>
      {isOpen && (
        <div className="absolute z-10 w-44 divide-y divide-gray-100 rounded bg-white shadow">
          <ul>
            <li>
              <a href="#" className="block px-4 py-2 hover:bg-gray-100">
                Dashboard
              </a>
            </li>
            <li>
              <a href="#" className="block px-4 py-2 hover:bg-gray-100">
                Settings
              </a>
            </li>
          </ul>
        </div>
      )}
    </div>
  )
}

export default Dropdown

FAQs

Ensure the hidden class is removed when the dropdown is toggled. Flowbite handles this automatically if set up correctly.

2. Can I use Flowbite without JavaScript?

No, Flowbite dropdowns require JavaScript for toggling visibility and positioning.