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

全部代码为here via github

Answer 1

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

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

Answer 2

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

Answer 3

我遇到了同样的问题。

我更改了这些：

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

这些 :

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

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

Answer 4

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

Header.js != header.js

Answer 5

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

Answer 6

在我的例子中，它是 directory 未在 tailwind.config.js 文件的 content 属性中列出。因此 tailwind 未检查驻留在该目录中的任何组件。

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

所以在将 content 列表更改为：

之后

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

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

Answer 7

尝试使用 useEffect() 和“导入 tw-elements”（在文件 _app.js 中）：

import { useEffect } from "react";
import Layout from "../components/Layout"

import "../styles/globals.css"

function MyApp({ Component, pageProps }) {

    useEffect(() => {
        import('tw-elements');
    }, []);

    return (
        <Layout className="scroll-smooth transition-all">
            <Component {...pageProps} />
        </Layout>

    )
}

export default MyApp

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

Some Tailwind styles not working in production with Next.js

javascript

css

reactjs

next.js

tailwind-css

2021 年 12 月更新：