Tailwind 类在生产页面刷新后不工作

Question

问题陈述：

我有一个 nextjs 项目 tailwindcss。在登录页面上，UI 在第一个页面加载时有必要的类，但是如果我刷新页面，那么类就会远离 DOM 并且UI坏了。

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

如何复制？

打开上面给定的link，你会观察到登录表单UI 看起来没问题。

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

代码文件

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>

Answer 1

我无法弄清楚这种奇怪行为背后的真正原因，但我使用基本的 div 作为 div(s) 的父级解决了这个问题类在页面刷新时消失。

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

像这样的东西对我有用。但是 tailwind CSS 仍然有很多问题。

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

Answer 2

我认为问题出在“清除”属性尝试这样的事情：

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

参考：https://tailwindcss.com/docs/guides/nextjs

Answer 3

注意：一个 hacky 解决方案，但可以完成工作

到目前为止，我还没有找到任何合适的解决方案，但我和我的团队所做的一件棘手的事情是更改 tailwind.config.js 中的某些内容，例如向上或向下移动自定义颜色然后保存。它重新运行我认为的顺风编译器，然后类开始工作。

Tailwind 类在生产页面刷新后不工作

Tailwind classes not working after page refresh in production

javascript

reactjs

next.js

tailwind-css

css-purge

问题陈述：

如何复制？

代码文件

Tailwind 类 在生产页面刷新后不工作

Tailwind classes not working after page refresh in production

javascript

reactjs

next.js

tailwind-css

css-purge

问题陈述：

如何复制？

代码文件

Tailwind 类在生产页面刷新后不工作