Tailwindcss在next.js中无法工作；配置有什么问题？

Question

因为某些原因，tailwind 在 next.js 中无法正常渲染。

我在想我的设置是否有问题？

样式文件夹 - tailwind.css

@tailwind base;

/* 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} />

我做错了什么？感到很困惑，通常这种设置都是可以正常的。

顺便提一下，这是网站 - 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"
  }
}

谢谢！

- LeCoda

Answer 1

在我的情况下，我已经正确设置了Tailwind配置文件，但是Tailwind样式并没有应用。删除 .next 文件夹并运行 next dev 可以解决问题。

- Gaurav Thakur

---

不知道为什么，但这对我也是如此。谢谢。 - Bryan Migliorisi

我像上面一样删掉了.next文件夹，然后运行了npm run dev。这样就重新构建了.next文件夹，所有Tailwind的东西都开始工作了。谢谢!!! @gaurav-thakur - Locohost

谢谢，这个立刻生效了。 - undefined

谢谢。我对这个问题犯了难。 - undefined

对我来说也可以) 谢谢 - undefined

Answer 2

对于使用nextJS创建项目的开发人员。

请注意，tailwind.config.js文件的内容需要正确的文件路径。

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

例如，如果您使用Next.js创建一个项目，您会有一个名为pages的文件夹，其中包含您的index.js文件。因此，在https://tailwindcss.com/docs/installation/using-postcss上的代码片段（如下所示）并不完全匹配。请根据上述内容或您自己的喜好进行更改。

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

- Yves Boutellier

---

你还应该将你的组件文件夹添加到内容中。 - DeveloperRyan

我忘记了'./src'。 - Charanjit Singh

这让我的一天变得美好。 - Arsh Arora

这应该是被接受的答案。 - Falcon Stakepool

错过了！谢谢这个！ - undefined

Answer 3

我的项目也遇到了同样的问题，但是我尝试像这样更改 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';

- AndriyFM

---

'/base.css'; 是什么？它是另一个文件还是从Tailwind导入的？ - NicoGulo

@NicoGulo你的自定义CSS - AndriyFM

但是我的自定义 CSS 在 globals.css 中。我应该移动到 base.css 吗？ - NicoGulo

为什么 @tailwind 不起作用而 @import 起作用呢？ - Nurul Huda

我遇到了与原帖作者相同的问题。尝试了AndriyFM的修复方法，有效了。然后我又试了一个全新的create-next-app，没有问题。接着我回到之前的项目中，将所有的 @import 规则替换为 @tailwind 规则，仍然能正常工作。考虑到Tailwind没有开放此类问题，我猜测问题可能与Next.js未能正确清除有关。 - bytrangle

Answer 4

我按照官方教程在这里安装了TailwindCSS到我的NextJS应用程序中-https://tailwindcss.com/docs/guides/nextjs，但仍然无法使其正常工作。

事实证明我已经忘记将global.css导入主应用程序文件中了。

添加 -

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

使用 into_app.tsx 解决了我的问题。

- Harrison Broadbent

---

我没意识到这么小的事情。谢谢！ - Kentaro Iwata

我迁移到了新的/app目录，并需要将其添加到app/layout.tsx中。 - tris timb

感谢上帝，这个帖子有19个赞哈哈。如果只有我一个人的话，可能会对我的人生选择有点担心哈哈。 - Tushar Sharma

另外，如果您正在使用页面文件夹，则相对路径将为 import "../app/globals.css"; 位于您的页面文件夹中的index.tsx内。如果您正在使用默认的npx create-next-app - Tushar Sharma

谢谢，我在开始一个新项目时删除了layout.tsx中所有与CSS相关的内容，并忘记使用应用程序路由器添加import "./globals.css"回来。 - Evilolipop

Answer 5

我解决这个问题的方法是在 tailwind.config.js 文件中的内容源中添加./src/...。Next.JS + Tailwindcss 的官方示例不支持 src 文件夹。

- andrewnosov

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 6

像这样在 global.css 中进行导入对我解决了问题:

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

- alshafi

Answer 7

我的一个项目安装了这些软件包版本

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

- Yilmaz

---

最后一部分运行得非常完美。 - Akshay K Nair

Answer 8

在经过数小时的摆弄后，我以最奇怪的方式让它工作了；我只是在我的组件中的一个元素上添加了一个类，并在global.css文件中编写了该类的自定义CSS样式，然后所有tailwind类都反映出来了。这可能是tailwind代码中需要追踪和修复的错误。

- Zia

---

请分享一个代码示例。 - Emre

这对我有用；类似的方法也行。我在globals.css中删除了一个样式，保存后再添加回去。然后Tailwind就可以工作了。 - JohnAllen

我在尝试了一整天并且失败后，也做了同样的事情，结果非常顺利，谢谢你。在我的 .tsx 文件中，我做了这个： <p className='myclass'>一些文本</p>在我的 global.css 文件中，我做了那个： @tailwind base; @tailwind components; @tailwind utilities; @layer { .myclass { @apply text-gray-600; }} - undefined

Answer 9

对于仍然遇到以下版本问题的人：

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

- Doğancan Arabacı

---

啊，非常感谢，这解决了我的问题！我使用的是Tailwind 1.1.4和postcss-preset-env，我想升级到版本3的Tailwind，通过查找解决了这个问题。 - Lukmanpryg

这个在相同版本上对我起作用了。非常感谢你。 - Chipsy

这个解决方案很有效，尽管我没有使用Nx。谢谢！ - Rahimuddin

抱歉，我想纠正一下。我的页面和组件在src文件夹中，我只需要在tailwind.config.js中添加./src/就可以了。谢谢 :) - Rahimuddin

只是想说谢谢。我们正在使用NX，这正是我们需要解决问题的方法。 - jasonmcleod

非常感谢。这非常有帮助！ - Ali Radmanesh

Answer 10

对于任何在2023年来到这里的人，如果上面的解决方案都不起作用，这可能听起来很明显，但是您需要确保在您的Next.js应用程序中有一个postcss.config.js文件，即使它是空的。

如果没有这个文件，样式就不会运行。 我花了一点时间来尝试解决这个问题，包括删除构建文件夹等。

如果按照文档操作，您应该已经有一个文件，但是如果没有（或者不小心删除了它），您可以在终端中运行以下命令：

npx tailwindcss init -p 

关于运行上述init命令的重要提示 - 它将覆盖您的tailwind配置。在运行上述命令之前，请确保您已经备份了它。

或者只需在您的目录根目录下创建一个postcss.config.js文件，并添加以下内容：

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

- Jon Nicholson

---

我的英雄，我在提交之前手指有点肥胖，在午餐休息前拖放了一个文件夹，导致了一些混乱...有趣的是没有404/真正的错误！谢谢！ - tristanvvatson

您真是应该被淋上啤酒的人。非常感谢您。在2023年，这样黑暗的错误仍然会发生，这让人感到非常不舒服。 - y_nk

是的，我同意，这是一个奇怪的小问题，但最终解决了。 - Jon Nicholson