堆棧內存溢出
  簡體   English   中英

一些 Tailwind styles 不能在生產中使用 Next.js

[英]Some Tailwind styles not working in production with Next.js

 原文  2021-03-04 22:58:56  4   7    javascript/ css/ reactjs/ next.js/ tailwind-css

問題描述

出於某種原因，一些 styles 似乎沒有在 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

7 個解決方案

解決方案1
 12 已采納  2021-03-04 22:58:56

對於將來看到這種情況的任何人，只需將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: [],
}

解決方案2
 5  2022-03-30 21:22:34

在我的例子中，它是一個沒有在tailwind.config.js文件的content屬性中列出的directory 。 因此 tailwind 沒有檢查駐留在該目錄中的任何組件。

我的新組件位於名為providers的文件夾中，但未在content中列出。

所以在將content列表更改為：

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

Tailwind 也正在檢查providers目錄。 因此，任何包含使用 tailwind 實用程序類的組件的目錄都必須包含在此列表中。

解決方案3
 1  2021-06-20 19:28:14

我遇到過同樣的問題。

我改變了這些：

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

對這些：

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

就是這樣。 問題解決了！ 奇怪的問題

解決方案4
 0  2021-04-14 13:19:07

就我而言，這是因為我沒有在tailwind.config.css 8CBA22E28EB17B5F5C6AE2A266AZ 中給出正確的purge地址

解決方案5
 0  2021-07-07 12:10:38

如果有人遇到不相應更新 dom 更改的問題。 檢查導入和文件名是否寫成相同的大小寫！

Header.js.= header.js

解決方案6
 0  2021-09-22 00:04:43

這偶爾發生在我身上，我最終發現，如果自上次部署以來我對站點所做的唯一更改是響應屬性，例如將md:w-1/4更改為sm:w-1/4 ，那么部署的站點將缺少對應於sm:w-1/4的 class 。 將任何新路徑（甚至是虛構路徑）添加到purge: [...數組和重新部署解決了問題。

解決方案7
 0  2022-01-31 20:48:53

我遇到了類似的情況，但無法使其發揮作用，我已經閱讀了上述所有建議，但我仍然遺漏了一些東西（可能非常明顯）。

結果是一樣的，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: {},
    },
  }

索引.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>

解決方案8
 -2  2022-04-10 01:50:16

嘗試使用 useEffect() 和“導入 tw 元素”（在文件 _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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Tailwind dark：不在 next.js 上工作？ Next.js 圖像組件 Tailwind-css 不工作 帶有 Tailwind 的 Next.js 上的圖像重疊導航欄 next.js 在生產中的工作 Taiwlind CSS：樣式不會在生產中加載，在開發中工作。 將 Next.js 與 MDX 結合使用 為什么文本顏色在 Tailwind css + next.js 項目中不起作用 Next.js生產中如何存儲文件？ 無法使用順風和 next.js typescript 正確調整我的圖標大小 Next.js + Tailwind 中的自定義字體：沒有錯誤，但字體錯誤 在 Next.js 中更改頁面時，Tailwind 動畫播放兩次？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM