Issue with tailwind, how to prevent w-0 letting a modal overflow from the page?

Question

I have an issue where I created a modal that slide from right to left, but and as soon as I use width 0:

<div
      className={`flex flex-col absolute right-0 top-0 h-full min-h-screen transition-width ease-in-out duration-300"  
        ${showModal ? 'w-144' : 'w-0'} 
        `}
    >

The modal overflow the main page as shown here below:

This is my component:

    import React from 'react';

interface ModalProps {
  showModal: boolean;
  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
}

const Modal = ({ showModal, setShowModal }: ModalProps) => {
  const toggleExpand = () => {
    setShowModal(!showModal);
  };
  return (
    <div
      className={`flex flex-col absolute right-0 top-0 h-full min-h-screen transition-width ease-in-out duration-300"  
        ${showModal ? 'w-144' : 'w-0'} 
        `}
    >
      <div className="bg-inpay-green-700 h-20 flex items-center justify-between text-white">
        <div className="flex justify-between items-start ml-3">
          <div className="flex flex-col items-start mx-3">
            <p className="text-xs right-0">payouts</p>
            <h3>Customer</h3>
          </div>
          <div className="flex flex-col items-start mx-3">
            <p className="text-xs right-0">payouts</p>
            <h3>Customer</h3>
          </div>
          <div className="flex flex-col items-start mx-3">
            <p className="text-xs right-0">payouts</p>
            <h3>Customer</h3>
          </div>
        </div>
        <div className="flex items-center mr-3">
          <div className="flex flex-col items-end mx-3">
            <p className="text-xs right-0">EUR</p>
            <h3>50.00</h3>
          </div>
          <a onClick={toggleExpand} className=" w-4 h-4 block top-8 mx-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="19.536"
              height="19.536"
              viewBox="0 0 19.536 19.536"
            >
              <g
                id="Group_6419"
                data-name="Group 6419"
                transform="translate(1.768 1.768)"
              >
                <path
                  id="Path_9699"
                  data-name="Path 9699"
                  d="M1.25,17.248l16-16"
                  transform="translate(-1.25 -1.248)"
                  fill="none"
                  stroke="#fff"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2.5"
                />
                <path
                  id="Path_9700"
                  data-name="Path 9700"
                  d="M17.25,17.248l-16-16"
                  transform="translate(-1.25 -1.248)"
                  fill="none"
                  stroke="#fff"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2.5"
                />
              </g>
            </svg>
          </a>
        </div>
      </div>
      <div className="bg-white h-full text-black flex justify-between overflow-hidden p-6 border border-inpay-black-haze-500">
        <div className="border border-inpay-black-haze-500 bg-inpay-black-haze-100  w-2/4">
          <p>TEST</p>
        </div>
        <div className="h-full w-2/4 ml-6">
          <div className="border border-inpay-black-haze-500 bg-inpay-black-haze-100 mb-6 h-40">
            <p>TEST</p>
          </div>
          <div className="border border-inpay-black-haze-500 bg-inpay-black-haze-100 mb-6 h-44">
            <p>TEST</p>
          </div>
          <div className="border border-inpay-black-haze-500 bg-inpay-black-haze-100 h-96">
            <p>TEST</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Modal;

I also tried to put overflow hidden on the parent as well as on the modal or use transition but nothing worked.

Answer 1

First, w-144 and transition-width are not a default class in Tailwind, you should add it in the configuration if you haven't. If that does not solve the problem, you can replace width class to max width and apply transition effect on it. It is the same trick that applies to transit the height property.

Example

<div
      className={`overflow-hidden w-full flex flex-col absolute right-0 top-0 h-full min-h-screen transition-all ease-in-out duration-300"  
        ${showModal ? 'max-w-7xl' : 'max-w-0'} 
        `}
    >