javascript - 在生产中刷新页面后 Tailwind 类不起作用

Question

问题陈述：

我有一个nextjs项目tailwindcss。在登录页面上，UI 具有在第一个页面加载时可用的必要类，但是如果我刷新页面，那么这些类就会从 DOM 中消失，并且 UI 会损坏。

这是站点登录页面的已部署链接

如何重现？

1. 打开上面给出的链接，您会观察到登录表单 UI看起来不错。

2. Ctrl+ R（刷新页面），你会观察到登录界面现在坏了

代码文件

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 --> 登录 UI 的 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>

标签： javascriptreactjsnext.jstailwind-csscss-purge

Answer 1

我无法找到这种奇怪行为背后的实际原因，但我使用一个基本div的作为（s）的父级解决了这个问题div，这些特定的类在页面刷新时消失了。

PS：我尝试了您的部署并且工作正常。没找到你说的问题。

像这样的东西对我有用。但是顺风 CSS 仍然有很多缺陷。

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