在生产环境中，Next.js 中的一些 Tailwind 样式无法正常工作。

8 浏览
0 Comments

在生产环境中，Next.js 中的一些 Tailwind 样式无法正常工作。

在Netlify上托管的生产版本构建中，一些样式似乎无法正常工作，而这似乎只发生在一个组件上。这是一个位于./layout/FormLayout.tsx的包装器（不知道是否会改变任何东西）。下面是这个包装器的代码：

const FormLayout: React.FC = ({ children, title, description }) => {
    return (
        

            {title}
        

        {description && (
            
{description}

        )}
        {children}
    )
}

并且在这里使用：

const Register: React.FC = () => {
    return (
        
            {/* form stuff. styles do work in here */}
        
    )
}

以下是一些配置文件：

tailwind配置：

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目录。

所有的代码都在这里通过github。

0