Not working with Craco and React during production

I am using tailwindcss with React using CRACO. The Rtl to Ltr switching is working fine during dev. But during production (Netlify) All of the classes which were supposed to be coming from rtl plugin are not there. I went through the code several time. On the inspector, It looks like during prod those classes don’t get generated.

Here is my Tailwind config file

module.exports = {
	purge: ["./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}"],
	darkMode: "class", // or 'media' or 'class'
	theme: {
		extend: {
			colors: {
				background: "var(--color-background)",
				backgroundSoft: "var(--color-background-soft)",
				backgroundSofter: "var(--color-background-softer)",
				accent: "var(--color-accent)",
				accentSoft: "var(--color-accent-soft)",
				accentSofter: "var(--color-accent-softer)",
				accentSoftest: "var(--color-accent-softest)",
				secondary: "var(--color-secondary)",
				secondarySoft: "var(--color-secondary-soft)",
				secondarySofter: "var(--color-secondary-softer)",
				secondarySoftest: "var(--color-secondary-softest)",
				online: "var(--color-online)",
				away: "var(--color-away)",
				offline: "var(--color-offline)",
			},
		},
	},
	variants: {
		extend: { backgroundColor: ["checked"], borderColor: ["checked"], outline: ["focus", "checked"] },
	},

	plugins: [require("@tailwindcss/forms"), require("tailwindcss-rtl")],
};

[20lives]

here is an example with vue, it’s should be pretty similar: https://www.youtube.com/watch?v=bhoDwo24K5Q

[sidwebworks]

Hmm, none of the solutions on the internet worked. But finally found a workaround. So if anyone else faces this when their [dir=ltr] and [dir=rtl] classes are being purged regardless of use.

Here is how you fool PurgeCSS: inside your markup just put the attribute inside some class name or string, here is an example:

<main className={`[dir=ltr] [dir=rtl] h-screen w-full bg-backgroundSoft ${Theme ? "theme-dark" : "theme-light"}`}>

After doing this purge CSS will load this selector.