I've been having the exact same problem in NextJS with Tailwind and Typescript. Dynamically swapping between sm:flex-row and sm:flex-row-reverse (in my case using Template Literals and a constant defined by the index of the item in a map).

It has an inconsistent bug where suddenly, after making a change anywhere on the page, all the items that should resolve to flex-row-reverse instead revert to being styled as the default breakpoint's flex-col. This issue will then persist through more changes, reloads, etc., until it will randomly fix itself again. I have tried other methods of dynamically setting the direction, I've tried just putting sm:flex-row and then only dynamically adding -reverse to the end, with no success. I truly don't know why it's happening or how to fix it at this point.

Here's a rough outline of the code:

<ul className="flex flex-col list-none">
            {arr.map((entry, index) => {
                const direction = index % 2 === 0 ? 'flex-row' : 'flex-row-reverse';
                return (
                <li key={entry.id} className={`flex flex-col sm:${direction} border-2 p-[1rem] my-[1rem]`}>
                    <Image
                        className="object-contain border border-black"
                        width={300}
                        height={300}
                        priority
                    />
                    <div>
                        <div className={`flex ${direction}`}>
                            <h2 className="border px-[0.5rem]">text</h2>
                            <div className="w-auto h-1/3 p-[0.25rem] border">text</div>
                        </div>
                        <div className={`flex ${direction} p-[0.5rem]`}>
                            <div className="mx-[1rem]">
                                text
                            </div>
                            <ul className="flex flex-col px-[2rem] py-[1rem] mx-[0.5rem] list-disc border">
                                <li>
                                    text
                                </li>
                                <li>
                                    text
                                </li>
                                <li>
                                    text
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                )
            })}
        </ul>