Tailwind styles not working on production

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.

user_6352807 · Answer

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.

user_12418865 · Answer

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 (
        
            
        

    )
}

export default MyApp

Tailwind styles not working on production

2 Answers