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>

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.