Tailwind classes not working after page refresh in production

Question

Problem Statement:

I have a nextjs project with tailwindcss. On the login page, the UI has the necessary classes available on the first page load, but if I refresh the page then the classes go away from the DOM and the UI is broken.

This is the deployed link to the site's login page

How to reproduce?

1. open the above given link, you will observe the login form UI looks okay.

2. Ctrl+R (Refresh the page), you will observe that the login UI is now broken

Code Files

tailwind.config.js

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: {
        content:[
        './src/pages/**/*.js',
        './src/pages/**/*.ts',
        './src/pages/**/*.tsx',
        './src/design-system/**/*.js',
        './src/design-system/**/*.ts',
        './src/design-system/**/*.tsx',
        './src/components/**/*.js',
        './src/components/**/*.ts',
        './src/components/**/*.tsx'
    ],
    
    // options: {whitelist:['h-52', 'py-9', 'max-w-2xl', 'text-white', 'h-screen']}
},
    darkMode: false, // or 'media' or 'class'
    theme: {
        fontSize: {
            'xxs': '10px',
            'xs': '.75rem',
            'sm': '.875rem',
            'tiny': '.875rem',
            'base': '1rem',
            'lg': '1.125rem',
            'xl': '1.25rem',
            '2xl': '1.5rem',
            '3xl': '1.875rem',
            '4xl': '2.25rem',
            '5xl': '3rem',
            '6xl': '4rem',
            '7xl': '5rem'
        },
        flex: {
            1: '1 1 0%',
            '30p': '0 0 30%',
            auto: '1 1 auto',
            initial: '0 1 auto',
            inherit: 'inherit',
            none: 'none',
            2: '2 2 0%',
            full: '0 0 100%',
            half: '0 0 50%'
        },
        colors: {
            white: colors.white,
            gray: colors.trueGray,
            indigo: colors.indigo,
            green: colors.green,
            red: colors.rose,
            rose: colors.rose,
            purple: colors.purple,
            orange: colors.orange,
            'light-blue': colors.lightBlue,
            fuchsia: colors.fuchsia,
            pink: colors.pink,
            cyan: colors.cyan,

            // NEW UI COLORS
            'CD-blue': '#2357DE',
            'CD-blue-accent': '#4770FF',
            'CD-black-dark': '#1D1D1D',
            'CD-black-dark-accent': '#202020',
            'CD-black-medium-dark': '#242424',
            'CD-black-extra-dark': '#1B1B1B',
            'CD-black-light': '#2E2E2E',
            'CD-gray': '#3E3E3E',
            'CD-gray-accent': '#353535',
            'CD-red-accent': '#FF745F',
            'CD-yellow-accent': '#FFC167'
        },
        minHeight: {
            0: '0',
            '1/4': '25%',
            '1/2': '50%',
            '3/4': '75%',
            full: '100%',
            '90vh': '90vh'
        },
        minWidth: {
            0: '0',
            '1/4': '25%',
            '1/2': '50%',
            '3/4': '75%',
            full: '100%',
            '250px': '250px'
        },
        screens: {
            xs: { min: '0px', max: '390px' },
            ...defaultTheme.screens
        },
        extend: {}
    },
    variants: {
        extend: {}
    },
    plugins: []
}

login.jsx --> login UI's JSX

<div>
<div className="h-screen w-full flex justify-center items-center mx-auto max-w-2xl text-white">
                <div className="w-full md:min-w-full bg-CD-black-dark-accent rounded px-8 mx-4 sm:px-16 py-10">
                    <div className="text-center mb-16">
                        <h1 className="text-3xl">Creator Login</h1>
                    </div>
                    <div className="space-y-4">
                        <Input
                            label="Enter username"
                            type="text"
                            placeholder="For e.g. noobmaster69"
                            value={username}
                            onChange={val => setUsername(val)}
                            data-testid="username"
                        />
                        <div>
                            <Input
                                label="Password"
                                type="password"
                                placeholder="For e.g. **************"
                                value={password}
                                onChange={val => setPassword(val)}
                                data-testid="password"
                            />
                            <p className="mt-2">
                                <a
                                    className="text-xs text-CD-blue cursor-pointer font-semibold"
                                    href="https://codedamn.com/contact"
                                    tabIndex={1}>
                                    Forgot Password?
                                </a>
                            </p>
                        </div>
                        <div>
                            <Button
                                label="Continue"
                                type="blue"
                                fullWidth
                                data-testid="login"
                                onClick={attemptUserLogin}
                                loading={busy}
                                disabled={busy}
                            />
                            <p className="text-center my-4">
                                <a
                                    className="text-xs cursor-pointer font-semibold"
                                    href="https://codedamn.com/login"
                                    tabIndex={1}>
                                    Regular Login
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <Head>
                <title>Creator Login | codedamn</title>
            </Head>
</div>

Answer 1

NOTE: A hacky solution but gets the job done

As of now, I haven't found any proper solution to this, but a hacky thing that my team and I do is to change something in tailwind.config.js like move custom colors up or down and then just save it. It re-runs the tailwind compiler I think, and then the classes start working.

Answer 2

I wasn't able to get to the actual reason behind this weird behavior, but I solved it using a basic div as parent to the div(s) with these specific classes that goes away on page refresh.

PS : I tried your deployment and its working fine. Couldn't find the problem you mentioned.

Something like this worked for me. But tailwind CSS is still quite buggy.

<div>
    <div className={"flex flex-row w-screen p-2 items-center"}>
        {...content}
    </div>
</div>

Answer 3

I think the problem is on "purge" property try something like this:

purge: ["./src/pages/**/*.{js,jsx,ts,tsx}", './src/styles/**/*.css'],

ref: https://tailwindcss.com/docs/guides/nextjs

Answer 4

I had this problem when navigating between page to page with router.push() method & I solved it with: window.location.href='\'