[Solved] Some Tailwind styles not working in production with Next.js

Problem:

Sometimes a few styles don't seem to be working in production with Next.js. This seems to only be happening on a single component.

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

tailwind config:

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

Solution:

Just add the path to any new folder in the purge array into the tailwind config like this:

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

Thank you for reading the article. If you face any problem. Your comment is always important to us.