Tailwind styles not working on production - create-react-app

Question

I've built a creat-react-app application and deployed it into Netlify (https://festive-booth-3f3a79.netlify.app/) but as you can see, for some reason styles are not being loaded.
I've tried to deploy the app with Vercel, but I've the same problem.
This is my tailwind.config.js
module.exports = {
important: true,
// Active dark mode on class basis
darkMode: "class",
i18n: {
locales: ["en-US"],
defaultLocale: "en-US",
},
purge: {
content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
// These options are passed through directly to PurgeCSS
},
theme: {
extend: {},
},
variants: {
extend: {
backgroundColor: ["checked"],
borderColor: ["checked"],
inset: ["checked"],
zIndex: ["hover", "active"],
},
},
plugins: [],
future: {
purgeLayersByDefault: true,
},
};
Here you can check all the others files I have: https://gitlab.com/lucas.distasi/react-tmdb
Running on my local with yarn start inside the build folder created after yarn run build works perfectly fine. So I'm guessing it's a problem with the Tailwind CSS files when deploying on a remote server.

Answer 1

Ok, the problem was that I was pointing to the wrong folders in the purge object. So, modifying what I had with this:
purge: {
content: ["./src/pages/**/*.{js,jsx,ts,tsx}", "./src/components/**/*.{js,jsx,ts,tsx}"]
// These options are passed through directly to PurgeCSS
}
Makes the page to display properly.
The directory might be different in your project.

Answer 2

Are you importing the "tw-elements.js"?
If dont, use the useEffect() to to "import tw-elements" (in file _app.js):
import { useEffect } from "react";
import Layout from "../components/Layout"
import "../styles/globals.css"
function MyApp({ Component, pageProps }) {
useEffect(() => {
import('tw-elements');
}, []);
return (
<Layout className="scroll-smooth transition-all">
<Component {...pageProps} />
</Layout>
)
}
export default MyApp

Answer 3

Simply add important: true in your tailwind.config.js file and it should work.
module.exports = {
important: true, // Add this in config file
// Rest of the content
};