CODEWITHSUNDEEP
create-react-apptailwind-cssnetlifyvercel
Lucas. D
Lucas. D

Reputation: 505

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.

Upvotes: 2

Views: 4200

Answers (4)

Gabriel Dominguez
Gabriel Dominguez

Reputation: 1

I had this problem and Raghav Patel comment solved it:

At tailwind.config.js insert important: true:

module.exports = {
  important: true, // Add this in config file
  // Rest of the content
};

Upvotes: 0

Raghav Patel
Raghav Patel

Reputation: 189

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
};

Upvotes: 1

Rodrigo Z. Armond
Rodrigo Z. Armond

Reputation: 9

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

Upvotes: 0

Lucas. D
Lucas. D

Reputation: 505

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.

Upvotes: 4

Related Questions