一些 Tailwind 样式在 Next.js 的生产环境中不起作用答案

【问题标题】：Some Tailwind styles not working in production with Next.js一些 Tailwind 样式在 Next.js 的生产环境中不起作用
【发布时间】：2021-06-03 15:31:57
【问题描述】：

由于某种原因，一些样式似乎在 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 目录。

所有代码都是here via github

【问题讨论】：

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

【解决方案1】：

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

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

2021 年 12 月更新：

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

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

【讨论】：

谢谢，默认配置为 darkMode: false，将其更改为 'class' 并且我的 classNames 开始工作。
您知道，将其更改为 class 意味着如果有一个元素的类为 dark，则每个子元素都可以使用 Tailwind 的 dark: 前缀。
哦，我忘了在清除数组中添加 /layouts/。快把我逼疯了，非常感谢！
这太棒了！我挠了几天头，为什么这不起作用。奇怪的是，这在 dev 中运行良好，但在 prod 中却没有。谢谢:)
@JeremyRajan 这是因为此配置仅在编译生产时使用。它用于发现应该从摇树中保存哪些类。更多信息是here。

【解决方案2】：

在我的情况下，这是因为我在purge 中没有在tailwind.config.css 中提供正确的地址

【讨论】：

【解决方案3】：

我遇到了同样的问题。

我改变了这些：

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

对这些：

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

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

【讨论】：

【解决方案4】：

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

Header.js != header.js

【讨论】：

【解决方案5】：

这偶尔发生在我身上，我最终发现，如果自上次部署以来我对网站所做的唯一更改是响应属性，例如将md:w-1/4 更改为sm:w-1/4，则部署的站点将缺少与sm:w-1/4 对应的类。向purge: [... 数组添加任何新路径（甚至是虚构路径）并重新部署即可解决问题。

【讨论】：

【解决方案6】：

我遇到了类似的情况，但无法使其发挥作用，我已经阅读了上述所有建议，但我仍然遗漏了一些东西（可能非常明显）。

结果是一样的，tailwind标签在浏览器上不起作用，没有显示错误，它根本不起作用（需要澄清我是Tailwindcss的新手，只测试它第一次但几天后无法让它工作，所以如果你发现一些非常愚蠢的东西，请温柔;）

这些是我的文件，如果有人可以查看或指出如何调试它，我将不胜感激：

styles.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js：

module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
    // Add extra paths here
  ],

  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

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

Index.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/public/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline text-red-700">
    Hello from Tailwind 3 CsSS
</h1>
<p class = "text-9xl"> testing cds
    <div class="container">

        <h2 class="text-3xl font-bold underline">
            Lorem8 ipsum dolor sit amet consectetur adipisicing elit. 
            Provident repudiandae fuga asperiores autem necessitatibus 
            similique enim placeat ipsa accusamus molestiae.
        </h2>  
    </div>  
</body>
</html>

【讨论】：

您需要将 HTML 文件指向您创建的 CSS 文件！只需添加 <link href="styles.css" rel="stylesheet"> 即可。
Herbie，非常感谢！！，这让我找到了解决方案，正如你所说，它没有找到 CSS 文件，但是，它应该指向“output.css” " 文件，没有 public/ 路径，在 tailwindcss 创建之后