css transition not working inside next/tailwind app

Question

"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";

const NavigationBar = () => (
  <div id="navbar">
    <Link href="/">Home</Link>
    <Link href="/about">About</Link>
   
  </div>
);



const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const togglebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="flex items-center justify-start px-4 border-gradient-bottom">
     
      <div className="flex text-l">
        <div className="hidden md:flex">
          <Nav />
        </div>
        <button
          className="flex md:hidden fixed right-8 top-8 h-4 bottom-20 z-40"
          onClick={() => togglebar()}
        >
          {isOpen ? (
             <div>open</div>
          ) : (
           <div>close</div>
          )}
        </button>
        {isOpen && (
          <div
            className={`h-full w-3/5 fixed right-0 z-30 transition-duration-300 ease-in-out ${
              isOpen ? "transform translate-x-0" : "transform translate-x-full"
            }`}
          >
            <NavigationBar />
          </div>
        )}
      </div>
    </div>
  );
};

export default Header;

above is my next/tailwind app its a client component.

my issue is CSS transition here is not working in next app i tried checking in Codepen using vanilla js its working but inside next app its not working. tried to get help from chatGBT also but seems like the tailwind configuration also ok no error showing just the transition is not working. my expected out put is when the toggle navbar should ease in. Does anyone have any idea of this error and any way to tackle this?

Answer 1

I think there are 2 issues:

1. the onclick on the button should be onclick={() => toggleNavbar()}
2. one of the toggle classes might not be included in the Tailwind build so you might also need to add safelist: ['transform translate-x-full','transform translate-x-0'] to the Tailwind config to ensure they will be included. This is probably not necessary to run locally but would be after deployment. Typescript example of the safelist config:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [
    require('@tailwindcss/forms'),
  ],
  safelist: [
      'transform translate-x-full',
      'transform translate-x-0',
  ],
}
export default config