Copy-pasting code for a tailwind-elements works perfectly in my vite-react app. Refreshing the page or running npm run dev breaks it.I followed the step by step instructions to get it started. When I copy-paste the code for an accordion ( or any of the other drop down types of elements ) they work perfectly. But when I refresh my page or do an npm run dev and npm run build, the accordion just stops dropping down. But when I ctrl+s to save it, it works again for that session.
import React from 'react' import { Collapse, initTE, } from "tw-elements";
initTE({ Collapse });
Google </div>
</div>
<div className="border border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800">
<h2 className="mb-0" id="head2">
<button
className="group relative flex w-full items-center rounded-none border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button"
data-te-collapse-init
data-te-collapse-collapsed
data-te-target="#collapseHeadTwo"
aria-expanded="false"
aria-controls="collapseHeadTwo"
>
Aniview
<span className="-mr-1 ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</button>
</h2>
<div
id="collapseHeadTwo"
className="!visible hidden"
data-te-collapse-item
aria-labelledby="head2"
data-te-parent="#accordionExample2"
>
<div>
<AniviewList
start_date={selectedRange && selectedRange[0]}
end_date={selectedRange && selectedRange[1]}
report_by= {initialValues.report_by}
/>
</div>
</div>
</div>
<div className="rounded-b-lg border border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800">
<h2 className="mb-0" id="head3">
<button
className="group relative flex w-full items-center border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)] [&[data-te-collapse-collapsed]]:rounded-b-[15px] [&[data-te-collapse-collapsed]]:transition-none"
type="button"
data-te-collapse-init
data-te-collapse-collapsed
data-te-target="#collapseHeadThree"
aria-expanded="false"
aria-controls="collapseHeadThree"
>
Outbrain
<span className="-mr-1 ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</button>
</h2>
<div
id="collapseHeadThree"
className="!visible hidden"
data-te-collapse-item
aria-labelledby="head3"
data-te-parent="#accordionExample2"
>
<div>
<OutbtainList
start_date={selectedRange && selectedRange[0]}
end_date={selectedRange && selectedRange[1]}
/>
</div>
</div>
</div>
</div>