Como utilizar o transition no tailwind?

Eu criei essa sidebar para um projeto pessoal e gostaria que ela abrisse com uma transição de duração de 500ms, que eu acabei por colocar no "aside", que é o componente que envolve toda a minha sidebar. No entanto, por algum motivo, essa transição não está funcionando e a sidebar apenas abre bruscamente. Alguém consegue me dizer como devo utilizá-la pra que funcione?

import { signOut } from "../service/AuthService";
import { ChevronsLeft, Globe, LogOut, Mail, Menu, Sparkles } from "lucide-react";
import { Button } from "./ui/button";
import { Separator } from "./ui/separator";

interface DashboardNewSidebarProps {
  isOpen: boolean;
  openSidebar: () => void;
  closeSidebar: () => void;
}

export function DashboardSidebar({ isOpen, openSidebar, closeSidebar }: DashboardNewSidebarProps) {
  return (
    <>
      {isOpen ? (
        <aside className="fixed group/sidebar overflow-y-auto top-0 h-full bg-white flex w-[280px] flex-col shadow-lg z-[99999] transition-all duration-500">
          <div>
            <ChevronsLeft
              role="button"
              className="absolute top-5 right-3 h-6 w-6 text-muted-foreground hover:text-[#0000ff]/60 "
              onClick={closeSidebar}
            />

            <div className="absolute top-5 left-4">
              <p className="text-[#0000ff] font-bold text-lg">Empresa</p>
            </div>

            <div
              role="button"
              className="opacity-0 group-hover/sidebar:opacity-100 transition absolute h-full w-1 bg-[#0000ff]/10 right-0 top-0"
              onClick={closeSidebar}
            />
            <Separator className="mt-16" />
          </div>

          <div className="pt-4 px-3">
            <Button
              className="group/globe mb-4 text-muted-foreground text-sm hover:text-slate-800 transition-all w-full"
              variant="outline"
            >
              <Globe className="h-4 w-4 text-muted-foreground group-hover/globe:text-[#0000ff]/60 mr-2" />
              Visualização
            </Button>
            <Button
              className="group/sparkles text-muted-foreground text-sm hover:text-slate-800 transition-all w-full"
              variant="outline"
            >
              <Sparkles className="h-4 w-4 text-muted-foreground group-hover/sparkles:text-amber-500/60 mr-2" />
              IA Análise
            </Button>
          </div>

          <div className="mt-auto mb-6 px-4">
            <Separator className="mb-6" />
            <p className="text-muted-foreground text-sm mb-6">Precisa de suporte?</p>
            <div className="flex items-center gap-2 mb-14">
              <Mail className="h-4 w-4 text-muted-foreground" />
              <p role="button" className="text-slate-800 text-sm hover:underline">
                suporte@nortengenharia.com.br
              </p>
            </div>
            <Button
              onClick={signOut}
              variant="logOut"
              className="group/logout mb-4 text-sm transition-all w-full"
            >
              <LogOut className="w-4 h-4 mr-2" />
              Sair
            </Button>
          </div>
        </aside>
      ) : (
        <div className="flex fixed top-0 z-[99999] left-0 items-center gap-3 transition-all p-5 durantion-500">
          <div>
            <Menu
              role="button"
              className="h-5 w-5 text-muted-foreground hover:text-[#0000ff]/60"
              onClick={openSidebar}
            />
          </div>
          <div>
            <p className="text-[#0000ff] font-bold text-lg">Global Norte</p>
          </div>
        </div>
      )}
    </>
  );
}

Agradeço desde já!!!