Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not working with Craco and React during production

See original GitHub issue

Issue Description

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")],

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

20livescommented, Apr 12, 2021

here is an example with vue, it’s should be pretty similar:

sidwebworkscommented, Apr 12, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Craco does not work properly with react-scripts@5.0.0
After upgrading react-scripts to v5, craco start does not work properly. App starts with no error but in browser, there is a blank...
Read more >
Update CRACO for create-react-app v5 · Issue #353
I worked with react script 5 next version for a while and craco and ... I just tried it out and it seems...
Read more >
Microfrontends: Integrating with a create-react-app (CRA) ...
What is CRACO: CRACO stands for Create-React-App Configuration Override. It is implemented as an easy way to override create-react-app ...
Read more >
STOP Using Create React App - YouTube
Create React App is a plague and we're here to cure it. Please use Vite, NextJS, or Remix instead. Seriously, anything is better...
Read more >
Using Create-React-App + Craco + Typescript to build ...
Craco solves this problem. With create-react-app 2, you can use the craco npm module to override the webpack config so it targets electron....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found