我觉得你的设置太大了。现在，你可以用简单得多的东西来实现这一点。

首先，我认为css不再需要加载到nextjs中，并且模块是本地支持的。(所以你可以用css的东西把它删除)

其次，如果你使用的是较新的版本，顺风不再需要如此复杂的设置。

因此，您将需要安装postcss-preset-env，但它现在确实消除了对大型配置的需要。

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

检查是否在_app.js文件上导入了global als.css文件，如果没有添加此文件

导入‘../Style/lobals.css’

通过以下方式在global als.css中将导入更改为顺风样式

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

而不是

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

postcss.config.js

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

taviwind.config.js

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

lobal.css

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

The issue for me was with a 'create-next-app' I did not have /pages/_app.js and therefore the global.css was not parsed.

Creating /pages/_app.js with the following content resolved the issue

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

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

在尝试了这个问题中的所有方法之后，有效的方法是更新nextjs：
NPM Install Next@Latest

另一个可以在下一个js中解决问题的解决方案是

在trawind.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

并且您需要在样式中创建，并在global al.css中添加样式

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

我刚刚经历了这一切。我想，我的主要问题是‘缺少postcss文件配置’，因为我使用npx tailwind init进行顺风初始化，而不是npx tailwind init -p(这也会生成postcss文件)。

另一个简单的潜在原因是Components/Pages文件夹拼写错误--确保拼写正确。

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"-->

我也经历过这种情况，但我的解决方案是编辑trawind.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: [],
}

像这样在global al.css中导入为我解决了这个问题：

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

我刚刚从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}",
],

在Pages文件夹中添加一个_app.js文件，然后添加以下代码。Global als.css路径应该是正确的。

import '../styles/globals.css'

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

export default MyApp

我在一些文件中也有同样的问题。

在删除所有内联顺风类并使用@apply将它们放入css文件后，它工作得很好。