Managing UI state in Tailwind

user_17532580 0
Viewed 88

I'd like to recreate an accordion component into Tailwind CSS. What is the workaround with ${active} state of the button?

Here is the code from original component:

<button className={`question-section ${active}`} onClick={toggleAccordion}>

And here it is with Tailwind, where I have no idea where to put ${active}:

<button 
  className="bg-transparent border-slate-600 rounded-lg shadow-md pointer w-screen" 
  {${active}}
  onClick={toggleAccordion}
>

full code

Will appreciate, thanks ✌️

use-state tailwind-css reactjs
1 Answers

Tailwind does not work well with dynamic values. You can instead build a CSS object and pass it in the style attribute of your button. You can also avoid using your useEffect(), since you are setting the local active state to drive the changes. For example, using your active and contentRef values:

const accordionMax = active ? `${contentRef.current.scrollHeight}px` : '0px';

...

<button 
  className='bg-transparent border-slate-600 rounded-lg shadow-md pointer w-screen'
  style={{maxHeight: accordionMax}}
  ...
>
  ...
</button>
user_2874760
Related