'Tailwind styles not working on production

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.

Solution 1:^[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.

Solution 2:^[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lucas. D
Solution 2	Rodrigo Z. Armond

'Tailwind styles not working on production

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]