CODEWITHSUNDEEP
javascriptcssreactjsnext.jstailwind-css
Herbie Vine
Herbie Vine

Reputation: 2025

Some Tailwind styles not working in production with Next.js

For some reason a few styles don't seem to be working in production build hosted on Netlify. This seems to only be happening on a single component. It's a wrapper located at ./layout/FormLayout.tsx (don't know if that changes anything). Here is the wrapper:

const FormLayout: React.FC<FormLayout> = ({ children, title, description }) => {
    return (
        <div className="w-screen mt-32 flex flex-col items-center justify-center">
            <div className="p-6 flex flex-col items-center justify-center">
                <h2 className="text-4xl font-semibold text-blue-400">
                    {title}
                </h2>
                {description && (
                    <h6 className="mt-4 text-md font-medium">{description}</h6>
                )}
                <div className="mt-12 w-max">{children}</div>
            </div>
        </div>
    )
}

and it's used here:

const Register: React.FC<RegisterProps> = () => {
    return (
        <FormLayout title="Register" description="Register with your email.">
            {/* form stuff. styles do work in here */}
        </FormLayout>
    )
}

Here are some of the config files:

tailwind config:

module.exports = {
    purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

postcss config:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Here is a graphical example of what is happening:

enter image description here

enter image description here

For my build command, I use next build && next export, and Netlify deploys the /out directory.

All the code is here via github

Upvotes: 31

Views: 34983

Answers (10)

rohit dalal
rohit dalal

Reputation: 1

For me deleting .next folder and re-running yarn build worked.

Might be some caching issue.

Upvotes: 0

Wide Awake
Wide Awake

Reputation: 1469

This one was killing me - it turned out to be the order of the string

This works {js,ts,jsx,tsx} this does not {ts,tsx,js,jsx}

Extract from tailwind.config.js below:

export const content = [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
  "./app/**/*.{js,ts,jsx,tsx}",
  "./src/**/*.{js,ts,jsx,tsx}",
];

Upvotes: 0

zahra shahrouzi
zahra shahrouzi

Reputation: 1012

in my case this was happening because i wasn't using the correct address in purge in tailwind.config.css

Upvotes: 1

Herbie Vine
Herbie Vine

Reputation: 2025

For anyone seeing this in the future, just add the path to any new folder in the purge array into the tailwind config like this:

module.exports = {
    purge: [
        "./src/**/*.{js,ts,jsx,tsx}",
        // Add more here
    ],
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

December 2021 Update:

After TailwindCSS v.3, the config file is slightly different. The above configuration would be:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add extra paths here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

NextJS App Directory

TailwindCSS is fully supported in NextJS 13, you simply need to add it as a dependency.

module.exports = {
  content: [
    // using ./src/ dir
    "./src/**/*.{js,ts,jsx,tsx}",
    // using ./ dir
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // add more paths here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 81

Franco Petra
Franco Petra

Reputation: 1032

For those upgrading to NextJs v13, make sure to update tailwind.config.js adding the app directory like this:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    "./app/**/*.{js,ts,jsx,tsx}",
    './components/**/*.{js,ts,jsx,tsx}'
  ]
};

Upvotes: 1

Rodrigo Z. Armond
Rodrigo Z. Armond

Reputation: 9

Try to use the useEffect() and "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: -2

Ali Baghban
Ali Baghban

Reputation: 695

In my case, it was a directory not being listed in the content property of tailwind.config.js file. so any component residing in that directory was not being checked by tailwind.

My new component was in a folder called providers, and it was not listed in content.

so after changing content list to:

 content: [
     // ...
     "./components/**/*.{js,ts,jsx,tsx}",
     "./providers/**/*.{js,ts,jsx,tsx}",  // the key was this line
 ]

The providers directory was also being checked by tailwind. So any directory which consists of a component that uses tailwind utility classes must be included in this list.

Upvotes: 6

Greg
Greg

Reputation: 669

This happened to me sporadically and I eventually found that if the only change I made to my site since the last deploy was to responsive attributes, e.g. changing md:w-1/4 to sm:w-1/4 then the deployed site would be missing the class corresponding to sm:w-1/4. Adding any new path (even a fictitious one) to the purge: [... array and redeploying solved the problem.

Upvotes: 0

Marc
Marc

Reputation: 2859

In case anyone is having issues with not updating dom changes accordingly. Check if imports and filenames are written with the same case!

Header.js != header.js

Upvotes: 0

alithecodeguy
alithecodeguy

Reputation: 139

I had the same issue.

I changed these :

purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

to these :

purge: ["./pages/**/*.js", "./components/**/*.js"],

and that's it. problem solved! weird issue

Upvotes: 7

Related Questions