Expand Div smoothly in react with tailwind not happening-CodePudding

I am trying to animate a div containing my input elements which should expand smoothly, the text area at first is small and the other two input and buttons are hidden, when clicking the text area input and button are shown, however there is no transition, just a jump in size, I tried to use framer motion but it doesn't accept the tailwindcss values, putting the transitions class in the parent div didn't help either, can someone please help me with this

        <div
            ref={mainDivRef}
            className='z-10 flex justify-center flex-wrap flex-col gap-2 p-2 bg-slate-300 bg-opacity-30  rounded-md'
            onClick={() => handleClickInside()}>
            <textarea
                className='transition ease-in-out delay-150 resize-none rounded-md p-1 focus:outline-none'
                value={mainText}
                placeholder={"Ask me something"}
                rows={rows}
                cols={columns}
                onChange={(e) => setmainText(e.target.value)} />
            {extraElements &&
                <div className='transition-all ease-in-out duration-150 delay-150 inline-flex gap-3 min-w-full'>
                    <input className='rounded-md  p-1  grow focus:outline-none ' type="email" name="sender" id="senderText" placeholder='Your email' />
                    <button className='rounded-md p-1   bg-blue-200'>Send</button>
                </div>
            }
        </div>

const handleClickInside = () => {
        setExtraElements(true)
        setRows(10)
        setColumns(100)
        props.blurBackground(true)
    }

CodePudding user response：

Since you're indirectly changing the textarea height/width by changing the rows property, the CSS transitions don't apply. Instead, you need to explicitly set the height of the text area.

For example, you can use CSS inline styles:

 <textarea
                className='transition ease-in-out delay-150 resize-none rounded-md p-1 focus:outline-none'
                value={mainText}
                placeholder={"Ask me something"}
                style={{ height: `${rows * 10}px`, width: `${columns * 10}px` }}
                onChange={(e) => setmainText(e.target.value)} />

CodePudding user response：

As an alternative to framer-motion you can use the Transition component from the @headlessui/react package. It works perfectly with the tailwindcss classes for both entry and exit animations.