Currently working with Next.JS version 14.1.3
I recently integrated the <Dialog> component from HeadlessUI and configured TailwindCSS. However, I encountered an issue where the Modal window doesn't have any transition effects even though I followed all the steps outlined in the example
CODE
Modal.tsx:
type TProps = {
isOpened: boolean;
onClose: VoidFunction;
children?: ReactNode;
};
export const Modal = ({ isOpened, onClose, children }: TProps) => {
return (
<Transition show={isOpened} as={Fragment}>
<Dialog as="div" className={s.modalWrapper} open={isOpened} onClose={onClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className={s.backdrop} />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className={s.modal}>{children}</Dialog.Panel>
</Transition.Child>
</Dialog>
</Transition>
);
};
and this is how it is implemented (if relevant):
AddProduct.tsx:
'use client';
import { useState } from 'react';
import { PlusIcon } from '@/icons';
import s from './AddProduct.module.scss';
import { AddProductModal } from './AddProductModal';
export const AddProductCard = () => {
const [modalOpened, setModalOpened] = useState<boolean>(false);
return (
<>
<div className={s.addProductCard} onClick={() => setModalOpened(true)}>
<PlusIcon className={s.plusIcon} />
</div>
<AddProductModal
modalOpened={modalOpened}
onClose={() => setModalOpened(false)}
/>
</>
);
};
Notably, the usage of <Transition> and <Transition.Child> components was included
Additionally, here are details from tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: ['./src/**/*.{js,ts,jsx,tsx}'],
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Moreover, postcss, tailwindcss, and autoprefixer have been properly installed on the system