某些 Tailwind 样式无法在 Next.js 的生产环境中使用

时间:2021-03-04 22:58:56

标签: javascript css reactjs next.js tailwind-css

出于某种原因,一些样式在 Netlify 上托管的生产版本中似乎不起作用。这似乎只发生在单个组件上。它是一个位于 ./layout/FormLayout.tsx 的包装器(不知道这是否会改变任何东西)。这是包装器:

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

在这里使用:

const Register: React.FC<RegisterProps> = () => {
    return (
        <FormLayout title="Register" description="Register with your email.">
            {/* form stuff. styles do work in here */}
        </FormLayout>
    )
}

这里是一些配置文件:

顺风配置:

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

postcss 配置:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

这是正在发生的事情的图形示例:

enter image description here

enter image description here

对于我的构建命令,我使用 next build && next export,Netlify 部署 /out 目录。

所有代码都是here via github

4 个答案:

答案 0 :(得分:8)

对于将来看到此内容的任何人,只需将 purge 数组中任何新文件夹的路径添加到 tailwind 配置中,如下所示:

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: [],
}

答案 1 :(得分:0)

就我而言,这是因为我没有在 purge 中的 tailwind.config.css 中提供正确的地址

答案 2 :(得分:0)

我遇到了同样的问题。

我改变了这些:

purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

到这些:

purge: ["./pages/**/*.js", "./components/**/*.js"],

就是这样。问题解决了! 奇怪的问题

答案 3 :(得分:0)

如果有人遇到不更新 dom 相应更改的问题。 检查导入和文件名是否使用相同的大小写!

Header.js != header.js