bug: Drawer translateX is flipped when used with tailwindcss-flip

[ibrahimelaradi]

What version of daisyUI are you using?

v3.5.1

Describe your issue

When using a drawer with tailwindcss-flip, translateX is flipped and the drawer is still visible to the user

I'm using the same example from the docs

		<div className="drawer lg:drawer-open">
			<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
			<div className="drawer-content flex flex-col items-center justify-center">
				{/* Page content here */}
				<label
					htmlFor="my-drawer-2"
					className="btn btn-primary drawer-button lg:hidden"
				>
					Open drawer
				</label>
			</div>
			<div dir="rtl" className="drawer-side">
				<label htmlFor="my-drawer-2" className="drawer-overlay"></label>
				<ul className="menu p-4 w-80 h-full bg-base-200 text-base-content">
					{/* Sidebar content here */}
					<li>
						<a>Sidebar Item 1</a>
					</li>
					<li>
						<a>Sidebar Item 2</a>
					</li>
				</ul>
			</div>
		</div>

Here's my tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/**/*.{js,jsx,ts,tsx}"],
	theme: {
		extend: {},
	},
	plugins: [
		require("@tailwindcss/typography"),
		require("tailwindcss-flip"),
		require("daisyui"),
	],
	daisyui: {
		themes: ["light"],
		base: true,
		styled: true,
		utils: true,
		rtl: true,
	},
};

What browsers are you seeing the problem on?

Firefox

Reproduction URL

No response

[ibrahimelaradi]

Currently, I fixed it by overriding the element style in the index stylesheet

/* Drawer menu fix */
[dir="rtl"] .drawer-side > :not(.drawer-overlay) {
	transform: translateX(100%);
}

I'm not sure if I'm doing something wrong or that is an expected behavior, hence the issue post