某些 Tailwind 样式在 Next.js 中无法用于生产

Question

出于某种原因，一些样式似乎不适用于 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: {},
  },
}

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

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

所有代码都在这里通过github

Answer 1

对于将来看到这一点的任何人，只需将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: [],
}

Answer 2

我遇到过同样的问题。

我改变了这些：

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

对这些：

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

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

Answer 3

就我而言，它没有directory被列在文件content属性中tailwind.config.js。因此，tailwind 不会检查驻留在该目录中的任何组件。

我的新组件位于名为 的文件夹中providers，并且未在 中列出content。

所以将content列表更改为：

 content: [
     // ...
     "./components/**/*.{js,ts,jsx,tsx}",
     "./providers/**/*.{js,ts,jsx,tsx}",  // the key was this line
 ]

providersTailwind 也正在检查该目录。因此，任何包含使用 tailwind 实用程序类的组件的目录都必须包含在此列表中。