一些 Tailwind 样式在 Next.js 的生产环境中不起作用 [英] Some Tailwind styles not working in production with Next.js

问题描述

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

For some reason a few styles don't seem to be working in production build hosted on Netlify. This seems to only be happening on a single component. It's a wrapper located at ./layout/FormLayout.tsx (don't know if that changes anything). Here is the wrapper:

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 配置:

postcss config:

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

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

Here is a graphical example of what is happening:

对于我的构建命令，我使用 next build &&下一个导出，Netlify部署/out目录.

For my build command, I use next build && next export, and Netlify deploys the /out directory.

所有代码都在这里通过github

推荐答案

对于以后看到这个的任何人，只需将 purge 数组中任何新文件夹的路径添加到 tailwind 配置中，如下所示:

For anyone seeing this in the future, just add the path to any new folder in the purge array into the tailwind config like this:

module.exports = {
    purge: [
        "./src/**/*.{js,ts,jsx,tsx}",
        // Add more here
    ],
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

2021 年 12 月更新:

在 TailwindCSS v.3 之后，配置文件略有不同.上面的配置是:

December 2021 Update:

After TailwindCSS v.3, the config file is slightly different. The above configuration would be:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add extra paths here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这篇关于一些 Tailwind 样式在 Next.js 的生产环境中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！