Tailwindcss 不適用於 next.js； 配置有什么問題？

Question

出於某種原因， tailwind在 next.js 中沒有正確呈現。

我想知道是不是我的設置有問題？

Styles 文件夾 - tailwind.css

@順風基地；

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

....

_app.js

import React from "react";
// import "styles/global.scss";


import 'styles/tailwind.css'


import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from "components/Layout/Footer";
import "util/analytics.js";
import { ProvideAuth } from "util/auth.js";

function MyApp({ Component, pageProps }) {
  return (
    <ProvideAuth>
      <>
        <NavbarCustom
          bg="white"
          variant="light"
          expand="md"
          logo="icons/Logo_512px.png"
        />

        <Component {...pageProps} />

我究竟做錯了什么？ 如此困惑，通常這種設置很好。

這是網站 btw - https://moodmap.app/ 。

使用下面的信息，進行了更改，但奇怪的是仍然是同樣的問題。

https://moodmap.app/是站點示例。

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
  variants: {},
  plugins: [],
}

postcss.config.js

module.exports = {
    plugins: [
      'tailwindcss',
      'postcss-flexbugs-fixes',
      [
        'postcss-preset-env',
        {
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
          features: {
            'custom-properties': false,
          },
        },
      ],
    ],
  }

{
  "name": "MoodMap",
  "version": "0.1.0",
  "private": true,
  "keywords": [
    "MoodMap"
  ],
  "dependencies": {
    "@analytics/google-analytics": "0.2.2",
    "@stripe/stripe-js": "^1.5.0",
    "analytics": "0.3.1",
    "fake-auth": "0.1.7",
    "mailchimp-api-v3": "1.13.1",
    "next": "9.5.3",
    "query-string": "6.9.0",
    "raw-body": "^2.4.1",
    "rc-year-calendar": "^1.0.2",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-hook-form": "4.10.1",
    "react-query": "2.12.1",
    "react-transition-group": "^4.4.1",
    "stripe": "^8.52.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "stripe-webhook": "stripe listen --forward-to localhost:3000/api/stripe-webhook"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "postcss-flexbugs-fixes": "^4.2.1",
    "postcss-preset-env": "^6.7.0",
    "stylelint": "^13.7.1",
    "stylelint-config-standard": "^20.0.0",
    "tailwindcss": "^1.8.9"
  }
}

謝謝！

Answer 1

我的項目也有同樣的問題，但我嘗試像這樣更改globals.css ：

前

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

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

后

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base.css';
@import 'tailwindcss/utilities';

Answer 2

對於使用 nextJS 創建項目的開發人員。

請注意， tailwind.config.js的內容需要正確的文件路徑。

module.exports = {
  content: ["./pages/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

例如，如果您使用 nextjs 創建一個項目，那么您有一個pages文件夾，您的index.js文件就位於該文件夾中。 因此https://tailwindcss.com/docs/installation/using-postcss上的代碼片段（見下文）並不完全匹配。 將其更改為上述或您自己的喜好。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 3

對我來說，解決方案是將./src/...添加到tailwind.config.js的內容源中。 官方 Next.JS + Tailwindcss 示例不支持 src 文件夾。

Answer 4

我的一個項目安裝了這些軟件包版本

"next": "11.1.0",
"autoprefixer": "^10.3.3",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"

tailwind.config.js中的此設置有效：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

最近我用這些包開始了一個新項目：

"next": "12.0.8",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"

以前的配置設置不起作用。 所以我將其更改為：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Answer 5

我按照官方教程從這里將 TailwindCSS 安裝到我的 NextJS 應用程序 — https://tailwindcss.com/docs/guides/nextjs — 但仍然無法正常工作。

事實證明，我忘記將global.css導入到我的主應用程序文件中。

添加 -

import "../styles/globals.css";

進入 _app.tsx 為我解決了它。

Answer 6

經過幾個小時的擺弄，我讓我的工作以最奇怪的方式工作； 我只是在我的一個組件中的一個元素中添加了一個類，然后在 global.css 文件中為該類編寫了自定義 CSS，然后反映了所有尾風類。 這可能是他們需要跟蹤和修復的 tailwind 代碼中的錯誤。

Answer 7

對於以下版本仍有問題的人：

"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",

在 Nx + Next.js 環境中，您可以簡單地使用以下配置文件：

// postcss.config.js
const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

---

// tailwind.config.js
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
    join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Answer 8

就我而言，我已經正確設置了 Tailwind 配置文件，但沒有應用 Tailwind 樣式。 刪除.next文件夾並運行next dev有所幫助。

Answer 9

我在某些文件中遇到了同樣的問題。

在刪除所有內聯順風類並使用@apply將它們放入 CSS 文件后，它運行良好。

Answer 10

我覺得你的設置太大了。 現在你可以用更簡單的東西來實現這一點。

首先，我認為不再需要將 CSS 加載到 nextjs 中，並且原生支持模塊。 （所以你可以用CSS的東西刪除這個）

其次，如果您使用較新的版本，順風不再需要如此復雜的設置。

所以你需要安裝 postcss-preset-env，但它現在確實不需要大配置。

查看此示例https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

Answer 11

我也遇到過這種情況，但我的解決方案是編輯 tailwind.connfig.js

取決於版本

對於版本 2

module.exports = {
 purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
}

對於版本 3

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Answer 12

 module.exports = { content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './containers/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } <!-- You have to add paths to folders in which you are using tailwindcss in the tailwind.config.js file --> <!-- Example: I add './containers/**/*.{js,ts,jsx,tsx}' to the "content"-->

Answer 13

另一個簡單的潛在原因是組件/頁面文件夾拼寫錯誤 - 確保它們拼寫正確。

Answer 14

我剛剛經歷了這一點。 我認為，我的主要問題是使用 npx tailwind init 進行npx tailwind init ，而不是 npx tailwind npx tailwind init -p （它也生成 postcss 文件配置）。

Answer 15

另一個解決方案，以便您可以在下一個 js 中解決問題是這個

在 tailwind.config.js 添加這個配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  subject: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"),require('@tailwindcss/forms'),],
  
};

在 postcss.config.js 中

module.exports = {
  plugins: ['tailwindcss','postcss-preset-env'],
};

最后，在下一個 js 配置中，您將添加它以使其適合您。

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  reactStrictMode: true,
  experimental: {
    concurrentFeatures: false, // <- Set this option to false.
    serverComponents: true,
  },
}

module.exports = nextConfig

並且您需要在 styles 中創建並在 global.css 中添加樣式

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

Answer 16

我剛剛從CRA遷移了我的應用程序。 所以我的CRA應用程序有一個名為features的文件夾，在它下面是每個功能的文件夾是它的Redux切片器和組件等。

為我解決的問題是將features文件夾包含在tailwind.config.js中：

前：

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

后

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

Answer 17

在 pages 文件夾中添加一個 _app.js 文件，然后添加此代碼。 globals.css 路徑應該是正確的。

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Answer 18

在嘗試了這個問題的所有內容之后，有效的是更新 nextjs：

npm 安裝下一個@latest

Answer 19

在 global.css 中像這樣導入為我解決了這個問題：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Answer 20

在 globals.css 中將導入更改為順風 styles

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

代替

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

Answer 21

檢查是否在 _app.js 文件上導入 globals.css 文件，如果它沒有添加這個

導入'../styles/globals.css'

Answer 22

對我來說，問題在於我沒有 /pages/_app.js 的“create-next-app”，因此 global.css 沒有被解析。

使用以下內容創建 /pages/_app.js 解決了該問題

import '../styles/globals.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

見https://nextjs.org/docs/basic-features/built-in-css-support

Answer 23

我剛剛重新安裝了我的 Next.js 項目並使用了 Tailwind 的指南並且成功了！

文檔： https://v2.tailwindcss.com/docs/guides/nextjs

Answer 24

在嘗試了 2 小時后，只需運行：

npm i tailwindcss@3.0.0

為我工作。

Answer 25

這聽起來不像是正常人的解決方案，但我的解決方案歸結為簡單地編輯globals.css 。 關於要共享的解決方案，沒有什么更具體的了。

我從一個全新的 Next.js 項目開始，並按照說明添加 Tailwind CSS。我嘗試了該項目中列出的所有解決方案。

• 使用示例 Next.js 項目創建腳本（有效）
• 復制並粘貼示例項目中的每個文件
• 使用完全相同的版本
• 刪除.next並重新安裝所有包
• 使用各種不同的方式來包含 Tailwind。

但精確的解決方案是這樣的：我剪切了 globals.css 的內容，使其只包含@tailwind指令（以及它上面的一些字體@import指令），這突然激活了 Tailwind CSS。粘貼我剛剛剪切的內容保持這個新發現的“工作”state。

我不知道這是怎么回事，因為不應該有任何緩存（我刪除了.next build 文件夾）並且我一直在編輯globals.css用於其他目的（但除了順風之外我沒有觸及任何東西 -相關指令）。 這很神秘，也很煩人。

我希望這可以避免其他人撕掉他們的頭發。

Answer 26

對我來說，我在不知不覺中在正則表達式中放置了空格是怎么回事。 所以我的代碼變成了-

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

這就是導致錯誤的原因。 所以我又從官網復制粘貼了。 讓它看起來像

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

我知道這是一個愚蠢的錯誤，但有時你是無意中犯下的。 :)

Answer 27

我的問題是通過npx create-next-app@latest並選擇新的 src 文件夾結構：

? Would you like to use `src/` directory with this project? › No / Yes

如果你 select Yes ，則需要在tailwind.config.js文件中添加以下內容：

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Answer 28

postcss.config.js

---

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

tailwind.config.js

---

    module.exports = {
      mode: 'jit',
      content: [
        "./**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

全局.css

---

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