Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?

Question

I want to make it centered like the 1st modal on https://tailwindui.com/components/application-ui/overlays/modals

I copied the same classes on the Modal below but I am unable to center it vertically. The classes are the exact same.

Is it a React Portal issue?

Modal.tsx

import * as React from "react"
import { Dialog } from "@headlessui/react"

type ModalProps = {
    isOpen: boolean
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}

export const Modal = ({ isOpen, setIsOpen }: ModalProps) => {
    return (
        <Dialog
            open={isOpen}
            onClose={setIsOpen}
            as="div"
            className="fixed inset-0 z-10 overflow-y-auto"
        >
            <div className="flex flex-col bg-gray-800 text-white w-96 mx-auto py-8 px-4 text-center">
                <Dialog.Overlay />

                <Dialog.Title className="text-red-500 text-3xl">
                    Deactivate account
                </Dialog.Title>
                <Dialog.Description className="text-xl m-2">
                    This will permanently deactivate your account
                </Dialog.Description>

                <p className="text-md m-4">
                    Are you sure you want to deactivate your account? All of your data
                    will be permanently removed. This action cannot be undone.
                </p>

                <button
                    className="w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                    onClick={() => setIsOpen(false)}
                >
                    Deactivate
                </button>
                <button
                    className="m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                    onClick={() => setIsOpen(false)}
                >
                    Cancel
                </button>
            </div>
        </Dialog>
    )
}

Codesandbox → https://codesandbox.io/s/headless-ui-dialog-1gd8e

I would like to center it vertically & horizontally. How do I do it?

by removing className props in Dialog, (``) ,the modal is like the example but the open modal button still active — antoineso, Mar 12 '21 at 08:53
@antoineso by removing `className` prop in `Dialog`, it just appears below the button (because everything in DOM is laid-out top to bottom) which is not how a modal works. modal hides everything below it with the focus only on modal. that's why we need the classes. its not the same :) — deadcoder0904, Mar 12 '21 at 09:45

deadcoder0904 · Accepted Answer · 2021-03-12T10:39:13.880

I had to add flex justify-center items-center to the parent & remove the mx-auto class from the child.

import * as React from "react"
import { Dialog } from "@headlessui/react"
import clsx from "clsx"

type ModalProps = {
    isOpen: boolean
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}

export const Modal = ({ isOpen, setIsOpen }: ModalProps) => {
    return (
        <Dialog
            open={isOpen}
            onClose={setIsOpen}
            as="div"
            className={clsx(
                "fixed inset-0 z-10 overflow-y-auto flex justify-center items-center",
                {
                    "bg-gray-900": isOpen === true,
                },
            )}
        >
            <div className="flex flex-col bg-gray-800 text-white w-96 py-8 px-4 text-center">
                <Dialog.Overlay />

                <Dialog.Title className="text-red-500 text-3xl">
                    Deactivate account
                </Dialog.Title>
                <Dialog.Description className="text-xl m-2">
                    This will permanently deactivate your account
                </Dialog.Description>

                <p className="text-md m-4">
                    Are you sure you want to deactivate your account? All of your data
                    will be permanently removed. This action cannot be undone.
                </p>

                <button
                    className="w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                    onClick={() => setIsOpen(false)}
                >
                    Deactivate
                </button>
                <button
                    className="m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                    onClick={() => setIsOpen(false)}
                >
                    Cancel
                </button>
            </div>
        </Dialog>
    )
}

It looks perfect now → https://codesandbox.io/s/headless-ui-dialog-1gd8e

I found this [class names list for tailwind](https://github.com/muhammadsammy/tailwindcss-classnames/blob/master/src/index.ts) may be this could help you for your future features. — antoineso, Mar 12 '21 at 10:27

Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?

Modal.tsx

1 Answers1